Loader by abrahamcalsin
#e8e8e8
1.jelly-triangle { 2 --uib-size: 2.8rem; 3 --uib-speed: 1.75s; 4 --uib-color: #183153; 5 position: relative; 6 height: var(--uib-size); 7 width: var(--uib-size); 8 filter: url('#uib-jelly-triangle-ooze'); 9} 10 11.jelly-triangle__dot, 12.jelly-triangle::before, 13.jelly-triangle::after { 14 content: ''; 15 position: absolute; 16 width: 33%; 17 height: 33%; 18 background: var(--uib-color); 19 border-radius: 100%; 20 box-shadow: 0 0 20px rgba(18, 31, 53, 0.3); 21} 22 23.jelly-triangle__dot { 24 top: 6%; 25 left: 30%; 26 animation: grow7132 var(--uib-speed) ease infinite; 27} 28 29.jelly-triangle::before { 30 bottom: 6%; 31 right: 0; 32 animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.666) 33 infinite; 34} 35 36.jelly-triangle::after { 37 bottom: 6%; 38 left: 0; 39 animation: grow7132 var(--uib-speed) ease calc(var(--uib-speed) * -0.333) 40 infinite; 41} 42 43.jelly-triangle__traveler { 44 position: absolute; 45 top: 6%; 46 left: 30%; 47 width: 33%; 48 height: 33%; 49 background: var(--uib-color); 50 border-radius: 100%; 51 animation: triangulate6214 var(--uib-speed) ease infinite; 52} 53 54.jelly-maker { 55 width: 0; 56 height: 0; 57 position: absolute; 58} 59 60@keyframes triangulate6214 { 61 0%, 62 100% { 63 transform: none; 64 } 65 66 33.333% { 67 transform: translate(120%, 175%); 68 } 69 70 66.666% { 71 transform: translate(-95%, 175%); 72 } 73} 74 75@keyframes grow7132 { 76 0%, 77 100% { 78 transform: scale(1.5); 79 } 80 81 20%, 82 70% { 83 transform: none; 84 } 85}
1.7K views
1.7K views
MIT License