Loader by pedertanberg
#e8e8e8
1.loader { 2 display: inline-block; 3 position: relative; 4 width: 80px; 5 height: 80px; 6 transform: rotate(45deg); 7 transform-origin: 40px 40px; 8} 9 10.loader div { 11 top: 32px; 12 left: 32px; 13 position: absolute; 14 width: 32px; 15 height: 32px; 16 background: red; 17 animation: loader45 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); 18} 19 20.loader div:after, 21.loader div:before { 22 content: " "; 23 position: absolute; 24 display: block; 25 width: 32px; 26 height: 32px; 27 background: red; 28} 29 30.loader div:before { 31 left: -24px; 32 border-radius: 50% 0 0 50%; 33} 34 35.loader div:after { 36 top: -24px; 37 border-radius: 50% 50% 0 0; 38} 39 40@keyframes loader45 { 41 0% { 42 transform: scale(0.95); 43 } 44 45 5% { 46 transform: scale(1.1); 47 } 48 49 39% { 50 transform: scale(0.85); 51 } 52 53 45% { 54 transform: scale(1); 55 } 56 57 60% { 58 transform: scale(0.95); 59 } 60 61 100% { 62 transform: scale(0.9); 63 } 64}
2.2K views
2.2K views
MIT License