Loader by exyreams
#e8e8e8
1.spinner { 2 position: relative; 3 width: 80px; 4 /* Adjust the width accordingly */ 5 height: 16px; 6 /* Keep the height the same */ 7} 8 9.spinner div { 10 position: absolute; 11 width: 16px; 12 height: 16px; 13 background-color: #004dff; 14 border-radius: 50%; 15 animation: spinner-4t3wzl 2s infinite linear; 16} 17 18.spinner div:nth-child(1) { 19 left: 0; 20 animation-delay: 0.15s; 21 background-color: rgba(0, 77, 255, 0.9); 22} 23 24.spinner div:nth-child(2) { 25 left: 25%; 26 animation-delay: 0.3s; 27 background-color: rgba(0, 77, 255, 0.8); 28} 29 30.spinner div:nth-child(3) { 31 left: 50%; 32 animation-delay: 0.45s; 33 background-color: rgba(0, 77, 255, 0.7); 34} 35 36.spinner div:nth-child(4) { 37 left: 75%; 38 animation-delay: 0.6s; 39 background-color: rgba(0, 77, 255, 0.6); 40} 41 42.spinner div:nth-child(5) { 43 left: 100%; 44 animation-delay: 0.75s; 45 background-color: rgba(0, 77, 255, 0.5); 46} 47 48@keyframes spinner-4t3wzl { 49 0% { 50 transform: rotate(0deg) translateX(-100%); 51 } 52 53 100% { 54 transform: rotate(360deg) translateX(-100%); 55 } 56}
560 views
560 views
MIT License