#e8e8e8
1.spinner { 2 position: absolute; 3 width: 9px; 4 height: 9px; 5} 6 7.spinner div { 8 position: absolute; 9 width: 50%; 10 height: 150%; 11 background: #000000; 12 transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%)); 13 animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease; 14} 15 16.spinner div:nth-child(1) { 17 --delay: 0.1; 18 --rotation: 36; 19 --translation: 150; 20} 21 22.spinner div:nth-child(2) { 23 --delay: 0.2; 24 --rotation: 72; 25 --translation: 150; 26} 27 28.spinner div:nth-child(3) { 29 --delay: 0.3; 30 --rotation: 108; 31 --translation: 150; 32} 33 34.spinner div:nth-child(4) { 35 --delay: 0.4; 36 --rotation: 144; 37 --translation: 150; 38} 39 40.spinner div:nth-child(5) { 41 --delay: 0.5; 42 --rotation: 180; 43 --translation: 150; 44} 45 46.spinner div:nth-child(6) { 47 --delay: 0.6; 48 --rotation: 216; 49 --translation: 150; 50} 51 52.spinner div:nth-child(7) { 53 --delay: 0.7; 54 --rotation: 252; 55 --translation: 150; 56} 57 58.spinner div:nth-child(8) { 59 --delay: 0.8; 60 --rotation: 288; 61 --translation: 150; 62} 63 64.spinner div:nth-child(9) { 65 --delay: 0.9; 66 --rotation: 324; 67 --translation: 150; 68} 69 70.spinner div:nth-child(10) { 71 --delay: 1; 72 --rotation: 360; 73 --translation: 150; 74} 75 76@keyframes spinner-fzua35 { 77 0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% { 78 transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%)); 79 } 80 81 50% { 82 transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%)); 83 } 84}
2.3K views
2.3K views
Comments
MIT License