Loader by dylanharriscameron
#e8e8e8
1.loaderBar { 2 width: calc(160px / 0.707); 3 height: 10px; 4 background: #F9F9F9; 5 border-radius: 10px; 6 border: 1px solid #006DFE; 7 position: relative; 8 overflow: hidden; 9} 10 11.loaderBar::before { 12 content: ""; 13 position: absolute; 14 top: 0; 15 left: 0; 16 height: 100%; 17 border-radius: 5px; 18 background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%; 19 animation: fillProgress 6s ease-in-out infinite, lightEffect 1s infinite linear; 20 animation-fill-mode: forwards; 21} 22 23@keyframes fillProgress { 24 0% { 25 width: 0; 26 } 27 28 33% { 29 width: 33.333%; 30 } 31 32 66% { 33 width: 66.67%; 34 } 35 36 100% { 37 width: 100%; 38 } 39} 40 41@keyframes lightEffect { 42 0%, 20%, 40%, 60%, 80%, 100% { 43 background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px) right/200% 100%; 44 } 45 46 10%, 30%, 50%, 70%, 90% { 47 background: repeating-linear-gradient(45deg, #0031F2 0 30px, #006DFE 0 40px, rgba(255, 255, 255, 0.3) 0 40px) right/200% 100%; 48 } 49}
1.2K views
1.2K views
MIT License