Loader by G4b413l
#e8e8e8
1.leap-frog { 2 --uib-size: 40px; 3 --uib-speed: 2s; 4 --uib-color: rgb(37, 37, 149); 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: space-between; 9 width: var(--uib-size); 10 height: var(--uib-size); 11} 12 13.leap-frog__dot { 14 position: absolute; 15 top: 0; 16 left: 0; 17 display: flex; 18 align-items: center; 19 justify-content: flex-start; 20 width: 100%; 21 height: 100%; 22} 23 24.leap-frog__dot::before { 25 content: ''; 26 display: block; 27 height: calc(var(--uib-size) * 0.22); 28 width: calc(var(--uib-size) * 0.22); 29 border-radius: 50%; 30 background-color: var(--uib-color); 31 will-change: transform; 32} 33 34.leap-frog__dot:nth-child(1) { 35 animation: leapFrog var(--uib-speed) ease infinite; 36} 37 38.leap-frog__dot:nth-child(2) { 39 transform: translateX(calc(var(--uib-size) * 0.4)); 40 animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -1.5) 41 infinite; 42} 43 44.leap-frog__dot:nth-child(3) { 45 transform: translateX(calc(var(--uib-size) * 0.8)) rotate(0deg); 46 animation: leapFrog var(--uib-speed) ease calc(var(--uib-speed) / -3) 47 infinite; 48} 49 50@keyframes leapFrog { 51 0% { 52 transform: translateX(0) rotate(0deg); 53 } 54 55 33.333% { 56 transform: translateX(0) rotate(180deg); 57 } 58 59 66.666% { 60 transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg); 61 } 62 63 99.999% { 64 transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg); 65 } 66 67 100% { 68 transform: translateX(0) rotate(0deg); 69 } 70} 71
1.6K views
1.6K views
MIT License