Loader by vikramsinghnegi
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 width: fit-content; 4 font-size: 17px; 5 font-family: monospace; 6 line-height: 1.4; 7 font-weight: bold; 8 padding: 30px 2px 50px; 9 background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box 10 no-repeat; 11 position: relative; 12 overflow: hidden; 13 animation: l10-0 2s infinite cubic-bezier(1, 175, 0.5, 175); 14} 15.loader::before { 16 content: "Loading"; 17 display: inline-block; 18 animation: l10-2 2s infinite; 19} 20.loader::after { 21 content: ""; 22 position: absolute; 23 width: 34px; 24 height: 28px; 25 top: 110%; 26 left: calc(50% - 16px); 27 background: linear-gradient( 28 90deg, 29 #0000 12px, 30 #f92033 0 22px, 31 #0000 0 26px, 32 #fdc98d 0 32px, 33 #0000 34 ) 35 bottom 26px left 50%, 36 linear-gradient(90deg, #0000 10px, #f92033 0 28px, #fdc98d 0 32px, #0000 0) 37 bottom 24px left 50%, 38 linear-gradient( 39 90deg, 40 #0000 10px, 41 #643700 0 16px, 42 #fdc98d 0 20px, 43 #000 0 22px, 44 #fdc98d 0 24px, 45 #000 0 26px, 46 #f92033 0 32px, 47 #0000 0 48 ) 49 bottom 22px left 50%, 50 linear-gradient( 51 90deg, 52 #0000 8px, 53 #643700 0 10px, 54 #fdc98d 0 12px, 55 #643700 0 14px, 56 #fdc98d 0 20px, 57 #000 0 22px, 58 #fdc98d 0 28px, 59 #f92033 0 32px, 60 #0000 0 61 ) 62 bottom 20px left 50%, 63 linear-gradient( 64 90deg, 65 #0000 8px, 66 #643700 0 10px, 67 #fdc98d 0 12px, 68 #643700 0 16px, 69 #fdc98d 0 22px, 70 #000 0 24px, 71 #fdc98d 0 30px, 72 #f92033 0 32px, 73 #0000 0 74 ) 75 bottom 18px left 50%, 76 linear-gradient( 77 90deg, 78 #0000 8px, 79 #643700 0 12px, 80 #fdc98d 0 20px, 81 #000 0 28px, 82 #f92033 0 30px, 83 #0000 0 84 ) 85 bottom 16px left 50%, 86 linear-gradient(90deg, #0000 12px, #fdc98d 0 26px, #f92033 0 30px, #0000 0) 87 bottom 14px left 50%, 88 linear-gradient( 89 90deg, 90 #fdc98d 6px, 91 #f92033 0 14px, 92 #222a87 0 16px, 93 #f92033 0 22px, 94 #222a87 0 24px, 95 #f92033 0 28px, 96 #0000 0 32px, 97 #643700 0 98 ) 99 bottom 12px left 50%, 100 linear-gradient( 101 90deg, 102 #fdc98d 6px, 103 #f92033 0 16px, 104 #222a87 0 18px, 105 #f92033 0 24px, 106 #f92033 0 26px, 107 #0000 0 30px, 108 #643700 0 109 ) 110 bottom 10px left 50%, 111 linear-gradient( 112 90deg, 113 #0000 10px, 114 #f92033 0 16px, 115 #222a87 0 24px, 116 #feee49 0 26px, 117 #222a87 0 30px, 118 #643700 0 119 ) 120 bottom 8px left 50%, 121 linear-gradient( 122 90deg, 123 #0000 12px, 124 #222a87 0 18px, 125 #feee49 0 20px, 126 #222a87 0 30px, 127 #643700 0 128 ) 129 bottom 6px left 50%, 130 linear-gradient(90deg, #0000 8px, #643700 0 12px, #222a87 0 30px, #643700 0) 131 bottom 4px left 50%, 132 linear-gradient(90deg, #0000 6px, #643700 0 14px, #222a87 0 26px, #0000 0) 133 bottom 2px left 50%, 134 linear-gradient(90deg, #0000 6px, #643700 0 10px, #0000 0) bottom 0px left 135 50%; 136 background-size: 34px 2px; 137 background-repeat: no-repeat; 138 animation: inherit; 139 animation-name: l10-1; 140} 141@keyframes l10-0 { 142 0%, 143 30% { 144 background-position: 0 0px; 145 } 146 50%, 147 100% { 148 background-position: 0 -0.1px; 149 } 150} 151@keyframes l10-1 { 152 50%, 153 100% { 154 top: 109.5%; 155 } 156} 157@keyframes l10-2 { 158 0%, 159 30% { 160 transform: translateY(0); 161 } 162 80%, 163 100% { 164 transform: translateY(-260%); 165 } 166} 167
87 views
87 views
MIT License