#212121
1.spinner { 2 --size: 30px; 3 --first-clr: #005bba; 4 --second-clr: #fed500; 5 width: 100px; 6 height: 100px; 7 position: relative; 8} 9 10.spinner::before, 11.spinner::after { 12 content: ""; 13 width: var(--size); 14 height: var(--size); 15 border: 6px solid var(--first-clr); 16 position: absolute; 17 top: 50%; 18 left: calc(var(--size)); 19 transform: translate(-50%, -50%); 20 animation: kf-spin 1s linear infinite; 21 border-radius: 50% 80% 50% 70%; 22 box-sizing: border-box; 23} 24 25.spinner::after { 26 top: 50%; 27 left: calc(var(--size) * 2); 28 border: 6px solid var(--second-clr); 29 animation: kf-spin 1s linear infinite reverse; 30} 31 32@keyframes kf-spin { 33 0% { 34 transform: rotate(0deg); 35 } 36 100% { 37 transform: rotate(360deg); 38 } 39} 40
77 views
Variation of aloader
77 views
Variation of aloader
Comments
MIT License