Loader by vinodjangid07
#e8e8e8
1.loader { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5} 6.loaderMiniContainer { 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 position: relative; 11 width: 130px; 12 height: fit-content; 13} 14.barContainer { 15 width: 100%; 16 height: fit-content; 17 display: flex; 18 flex-direction: column; 19 align-items: flex-start; 20 justify-content: center; 21 gap: 10px; 22 background-position: left; 23} 24.bar { 25 width: 100%; 26 height: 8px; 27 background: linear-gradient( 28 to right, 29 rgb(161, 94, 255), 30 rgb(217, 190, 255), 31 rgb(161, 94, 255) 32 ); 33 background-size: 200% 100%; 34 border-radius: 10px; 35 animation: bar ease-in-out 3s infinite alternate-reverse; 36} 37@keyframes bar { 38 0% { 39 background-position: left; 40 } 41 100% { 42 background-position: right; 43 } 44} 45.bar2 { 46 width: 50%; 47} 48.svgIcon { 49 position: absolute; 50 left: -25px; 51 margin-top: 18px; 52 z-index: 2; 53 width: 70%; 54 animation: search ease-in-out 3s infinite alternate-reverse; 55} 56@keyframes search { 57 0% { 58 transform: translateX(0%) rotate(70deg); 59 } 60 61 100% { 62 transform: translateX(100px) rotate(10deg); 63 } 64} 65.svgIcon circle, 66line { 67 stroke: rgb(162, 55, 255); 68} 69.svgIcon circle { 70 fill: rgba(98, 65, 142, 0.238); 71} 72
1.5K views
1.5K views
MIT License