#212121
1.spinner { 2 --size: 30px; 3 --first-block-clr: #005bba; 4 --second-block-clr: #fed500; 5 --clr: #111; 6 width: 100px; 7 height: 100px; 8 position: relative; 9 animation: spin 2s linear infinite; 10} 11 12.spinner::after, 13.spinner::before { 14 box-sizing: border-box; 15 position: absolute; 16 content: ""; 17 width: var(--size); 18 height: var(--size); 19 top: 50%; 20 left: 50%; 21 background: var(--first-block-clr); 22 border-radius: 50%; 23 transform: translate(-50%, -50%); 24 animation: orbit 2s linear infinite, up 2s infinite; 25} 26 27.spinner::after { 28 background: var(--second-block-clr); 29 animation: orbit 2s linear infinite, down 2s infinite; 30} 31 32@keyframes orbit { 33 0% { 34 transform: rotate(0deg); 35 } 36 100% { 37 transform: rotate(360deg); 38 } 39} 40 41@keyframes down { 42 0%, 43 100% { 44 transform: none; 45 } 46 47 25% { 48 transform: translateX(100%); 49 } 50 51 50% { 52 transform: translateX(100%) translateY(100%); 53 filter: blur(10px); 54 } 55 56 75% { 57 transform: translateY(100%); 58 } 59} 60 61@keyframes up { 62 0%, 63 100% { 64 transform: none; 65 } 66 67 25% { 68 transform: translateX(-100%); 69 } 70 71 50% { 72 transform: translateX(-100%) translateY(-100%); 73 filter: blur(10px); 74 } 75 76 75% { 77 transform: translateY(-100%); 78 } 79} 80 81@keyframes spin { 82 0% { 83 transform: rotate(0deg); 84 } 85 100% { 86 transform: rotate(360deg); 87 } 88} 89
115 views
Variation of aloader
115 views
Variation of aloader
Comments
MIT License