Loader by EddyBel
#212121
1.loader { 2 position: relative; 3 display: flex; 4 gap: 0.3em; 5} 6 7.loader::before { 8 content: ""; 9 position: absolute; 10 left: 0; 11 top: 0; 12 width: 100%; 13 height: 2em; 14 filter: blur(45px); 15 background-color: #e299ff; 16 background-image: radial-gradient(at 52% 57%, hsla(11,83%,72%,1) 0px, transparent 50%), 17 radial-gradient(at 37% 57%, hsla(175,78%,66%,1) 0px, transparent 50%); 18} 19 20.loader__circle { 21 --size__loader: 0.6em; 22 width: var(--size__loader); 23 height: var(--size__loader); 24 border-radius: 50%; 25 animation: loader__circle__jumping 2s infinite; 26 background-color: #b499ff; 27} 28 29.loader__circle:nth-child(2n) { 30 animation-delay: 300ms; 31 background-color: #e499ff; 32} 33 34.loader__circle:nth-child(3n) { 35 animation-delay: 600ms; 36} 37 38@keyframes loader__circle__jumping { 39 0%, 100% { 40 transform: translateY(0px); 41 } 42 43 25% { 44 transform: translateY(-15px) scale(0.5); 45 } 46 47 50% { 48 transform: translateY(0px); 49 } 50 51 75% { 52 transform: translateY(5px) scale(0.9); 53 } 54}
1.2K views
1.2K views
MIT License