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