Loader by KhaledMatalkah
#212121
1.loader { 2 width: 100px; 3 height: 100px; 4 border: 8px solid #ffcc00; 5 border-radius: 50%; 6 border-top-color: transparent; 7 position: relative; 8 animation: loaderAnimation 1.5s linear infinite; 9} 10 11.loader::before, 12.loader::after { 13 content: ''; 14 position: absolute; 15 height: 20px; 16 width: 20px; 17 left: 50%; 18 top: 50%; 19 background-color: #ffcc00; 20 border-radius: 50%; 21 transform: translate(-50%, -50%); 22} 23 24.loader::before { 25 animation: loaderAnimationBefore 1s linear infinite; 26} 27 28.loader::after { 29 animation: loaderAnimationAfter 1s linear infinite; 30} 31 32@keyframes loaderAnimation { 33 0% { 34 transform: rotate(0deg); 35 } 36 37 100% { 38 transform: rotate(360deg); 39 } 40} 41 42@keyframes loaderAnimationBefore { 43 0% { 44 opacity: 1; 45 transform: translate(-50%, -50%) scale(1); 46 } 47 48 50% { 49 opacity: 0; 50 transform: translate(-50%, -50%) scale(0); 51 } 52 53 100% { 54 opacity: 1; 55 transform: translate(-50%, -50%) scale(1); 56 } 57} 58 59@keyframes loaderAnimationAfter { 60 0% { 61 opacity: 0; 62 transform: translate(-50%, -50%) scale(0); 63 } 64 65 50% { 66 opacity: 1; 67 transform: translate(-50%, -50%) scale(1); 68 } 69 70 100% { 71 opacity: 0; 72 transform: translate(-50%, -50%) scale(0); 73 } 74} 75
446 views
446 views
MIT License