#212121
1.spinner { 2 --size: 30px; 3 --color: white; 4 width: 100px; 5 height: 100px; 6 position: relative; 7} 8 9.spinner::after,.spinner::before { 10 box-sizing: border-box; 11 position: absolute; 12 content: ""; 13 width: var(--size); 14 height: var(--size); 15 top: 50%; 16 animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; 17 left: 50%; 18 background: var(--color); 19 box-shadow: 0 0 calc(var(--size) / 3) rgba(0, 0, 0, 0.25); 20} 21 22.spinner::after { 23 background: var(--color); 24 top: calc(50% - var(--size)); 25 left: calc(50% - var(--size)); 26 animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite; 27} 28 29@keyframes down { 30 0%, 100% { 31 transform: none; 32 } 33 34 25% { 35 transform: translateX(100%); 36 } 37 38 50% { 39 transform: translateX(100%) translateY(100%); 40 } 41 42 75% { 43 transform: translateY(100%); 44 } 45} 46 47@keyframes up { 48 0%, 100% { 49 transform: none; 50 } 51 52 25% { 53 transform: translateX(-100%); 54 } 55 56 50% { 57 transform: translateX(-100%) translateY(-100%); 58 } 59 60 75% { 61 transform: translateY(-100%); 62 } 63} 64
244 views
Variation of aloader
244 views
Variation of aloader
Comments
MIT License