Loader by JaydipPrajapati1910
#212121
1.loader { 2 width: 160px; 3 height: 80px; 4 border: 4px solid #00F45B; 5 border-right-color: transparent; 6 padding: 6px; 7 background: repeating-linear-gradient(90deg,#00F45B 0 20px,#0000 0 30px) 8 left/0% 100% no-repeat content-box content-box; 9 position: relative; 10 animation: p5 2s infinite steps(6); 11} 12 13.loader::before { 14 content: ""; 15 position: absolute; 16 top: -4px; 17 bottom: -4px; 18 left: 100%; 19 width: 20px; 20 background: linear-gradient( 21 #0000 calc(50% - 14px),#00F45B 0 calc(50% - 10px), 22 #0000 0 calc(50% + 10px),#00F45B 0 calc(50% + 14px),#0000 0) left /100% 100%, 23 linear-gradient(#00F45B calc(50% - 10px),#0000 0 calc(50% + 10px),#00F45B 0) left /4px 100%, 24 linear-gradient(#0000 calc(50% - 10px),#00F45B 0 calc(50% + 10px),#0000 0) right/4px 100%; 25 background-repeat: no-repeat; 26} 27 28@keyframes p5 { 29 100% { 30 background-size: 120% 100% 31 } 32} 33 34
770 views
770 views
MIT License