Loader by kerolos23
#212121
1.loader { 2 transform: rotateZ(45deg); 3 perspective: 1000px; 4 border-radius: 50%; 5 width: 48px; 6 height: 48px; 7 color: #91ff00; 8} 9 10.loader:before, 11.loader:after { 12 content: ''; 13 display: block; 14 position: absolute; 15 top: 0; 16 left: 0; 17 width: inherit; 18 height: inherit; 19 border-radius: 50%; 20 transform: rotateX(70deg); 21 animation: 1s spin linear infinite; 22} 23 24.loader:after { 25 color: #FF3D00; 26 transform: rotateY(70deg); 27 animation-delay: .4s; 28} 29 30@keyframes rotate { 31 0% { 32 transform: translate(-50%, -50%) rotateZ(0deg); 33 } 34 35 100% { 36 transform: translate(-50%, -50%) rotateZ(360deg); 37 } 38} 39 40@keyframes rotateccw { 41 0% { 42 transform: translate(-50%, -50%) rotate(0deg); 43 } 44 45 100% { 46 transform: translate(-50%, -50%) rotate(-360deg); 47 } 48} 49 50@keyframes spin { 51 0%, 52 100% { 53 box-shadow: .2em 0px 0 0px currentcolor; 54 } 55 56 12% { 57 box-shadow: .2em .2em 0 0 currentcolor; 58 } 59 60 25% { 61 box-shadow: 0 .2em 0 0px currentcolor; 62 } 63 64 37% { 65 box-shadow: -.2em .2em 0 0 currentcolor; 66 } 67 68 50% { 69 box-shadow: -.2em 0 0 0 currentcolor; 70 } 71 72 62% { 73 box-shadow: -.2em -.2em 0 0 currentcolor; 74 } 75 76 75% { 77 box-shadow: 0px -.2em 0 0 currentcolor; 78 } 79 80 87% { 81 box-shadow: .2em -.2em 0 0 currentcolor; 82 } 83} 84
1.1K views
1.1K views
MIT License