Loader by vikramsinghnegi
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 font-weight: bold; 4 font-family: monospace; 5 display: inline-grid; 6 font-size: 30px; 7} 8.loader:before, 9.loader:after { 10 content: "Refresh...."; 11 grid-area: 1/1; 12 -webkit-mask-size: 1.5ch 100%, 100% 100%; 13 -webkit-mask-repeat: no-repeat; 14 -webkit-mask-composite: xor; 15 mask-composite: exclude; 16 animation: l36-1 1s infinite; 17} 18.loader:before { 19 -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0); 20} 21.loader:after { 22 -webkit-mask-image: linear-gradient(#000 0 0); 23 animation: l36-1 1s infinite, 24 l36-2 0.2s infinite cubic-bezier(0.5, 200, 0.5, -200); 25} 26 27@keyframes l36-1 { 28 0% { 29 -webkit-mask-position: 0 0, 0 0; 30 } 31 20% { 32 -webkit-mask-position: 0.5ch 0, 0 0; 33 } 34 40% { 35 -webkit-mask-position: 100% 0, 0 0; 36 } 37 60% { 38 -webkit-mask-position: 4.5ch 0, 0 0; 39 } 40 80% { 41 -webkit-mask-position: 6.5ch 0, 0 0; 42 } 43 100% { 44 -webkit-mask-position: 2.5ch 0, 0 0; 45 } 46} 47@keyframes l36-2 { 48 100% { 49 transform: translateY(0.2px); 50 } 51} 52
194 views
194 views
MIT License