Nov 11, 2022944 views
CSSAdd prefixes
1.loader { 2 height: 100vh; 3 display: flex; 4 align-items: center; 5 justify-content: center; 6 flex-direction: row; 7} 8 9.slider { 10 overflow: hidden; 11 background-color: white; 12 margin: 0 15px; 13 height: 80px; 14 width: 20px; 15 border-radius: 30px; 16 box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff, 17 inset -5px -5px 10px rgba(0, 0, 255, 0.1), 18 inset 5px 5px 10px rgba(0, 0, 0, 0.1); 19 position: relative; 20} 21 22.slider::before { 23 content: ""; 24 position: absolute; 25 top: 0; 26 left: 0; 27 height: 20px; 28 width: 20px; 29 border-radius: 100%; 30 box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3, 31 inset 0px 0px 0px rgba(0, 0, 0, 0.1); 32 animation: animate_2 2.5s ease-in-out infinite; 33 animation-delay: calc(-0.5s * var(--i)); 34} 35 36@keyframes animate_2 { 37 0% { 38 transform: translateY(250px); 39 filter: hue-rotate(0deg); 40 } 41 42 50% { 43 transform: translateY(0); 44 } 45 46 100% { 47 transform: translateY(250px); 48 filter: hue-rotate(180deg); 49 } 50} 51
HTML
1 2 <section class="loader"> 3 4 <div style="--i:0" class="slider"> 5 </div> 6 <div style="--i:1" class="slider"> 7 </div> 8 <div style="--i:2" class="slider"> 9 </div> 10 <div style="--i:3" class="slider"> 11 </div> 12 <div style="--i:4" class="slider"> 13 </div> 14 </section> 15 16 17