#212121
1.spinner { 2 --size: 30px; 3 --first: #005bba; 4 --second: #fed500; 5 width: 100px; 6 height: 100px; 7 position: relative; 8 animation: spin 3s linear infinite; 9} 10 11.spinner::before, 12.spinner::after { 13 content: ""; 14 width: var(--size); 15 height: var(--size); 16 border: 4px solid var(--first); 17 border-top: 4px solid var(--second); 18 border-radius: 50%; 19 position: absolute; 20 top: 50%; 21 left: 50%; 22 transform: translate(-50%, -50%); 23 animation: spinRing 1.5s ease-out infinite; 24 box-shadow: 0 0 10px var(--first); 25} 26 27.spinner::before { 28 filter: blur(10px); 29} 30 31@keyframes spinRing { 32 0% { 33 transform: translate(-50%, -50%) rotate(0deg); 34 } 35 100% { 36 transform: translate(-50%, -50%) rotate(360deg); 37 } 38} 39 40@keyframes spin { 41 0% { 42 transform: rotate(0deg); 43 } 44 100% { 45 transform: rotate(360deg); 46 } 47} 48
102 views
Variation of aloader
102 views
Variation of aloader
Comments
MIT License