#e8e8e8
1.loader { 2 display: block; 3 --height-of-loader: 4px; 4 --loader-color: #0071e2; 5 width: 130px; 6 height: var(--height-of-loader); 7 border-radius: 30px; 8 background-color: rgba(0,0,0,0.2); 9 position: relative; 10} 11 12.loader::before { 13 content: ""; 14 position: absolute; 15 background: var(--loader-color); 16 top: 0; 17 left: 0; 18 width: 0%; 19 height: 100%; 20 border-radius: 30px; 21 animation: moving 1s ease-in-out infinite; 22 ; 23} 24 25@keyframes moving { 26 50% { 27 width: 100%; 28 } 29 30 100% { 31 width: 0; 32 right: 0; 33 left: unset; 34 } 35}
Comments
Variations
1 MIT License