Loader by timlmit
#e8e8e8
1.loader { 2 display: block; 3 position: relative; 4 height: 32px; 5 width: 200px; 6 background: #fff; 7 border: 2px solid #fff; 8 color: rgb(223, 60, 60); 9 overflow: hidden; 10} 11 12.loader::before { 13 content: ''; 14 background: rgb(223, 60, 60); 15 position: absolute; 16 left: 0; 17 top: 0; 18 width: 0; 19 height: 100%; 20 animation: loading_302 10s linear infinite; 21} 22 23.loader:after { 24 content: ''; 25 position: absolute; 26 left: 0; 27 top: 0; 28 width: 100%; 29 height: 100%; 30 text-align: center; 31 font-size: 18px; 32 line-height: 32px; 33 color: rgb(0,255,255); 34 mix-blend-mode: difference; 35 animation: percentage_302 10s linear infinite; 36} 37 38@keyframes loading_302 { 39 0% { 40 width: 0 41 } 42 43 100% { 44 width: 100% 45 } 46} 47 48@keyframes percentage_302 { 49 0% { 50 content: "0%" 51 } 52 53 5% { 54 content: "5%" 55 } 56 57 10% { 58 content: "10%" 59 } 60 61 20% { 62 content: "20%" 63 } 64 65 30% { 66 content: "30%" 67 } 68 69 40% { 70 content: "40%" 71 } 72 73 50% { 74 content: "50%" 75 } 76 77 60% { 78 content: "60%" 79 } 80 81 70% { 82 content: "70%" 83 } 84 85 80% { 86 content: "80%" 87 } 88 89 90% { 90 content: "90%" 91 } 92 93 95% { 94 content: "95%" 95 } 96 97 96% { 98 content: "96%" 99 } 100 101 97% { 102 content: "97%" 103 } 104 105 98% { 106 content: "98%" 107 } 108 109 99% { 110 content: "99%" 111 } 112 113 100% { 114 content: "100%" 115 } 116} 117 118
1.6K views
1.6K views
MIT License