Loader by Flowelife
#212121
1@keyframes load-loop { 2 0% { 3 background-position: 100%; 4 } 5 6 40% { 7 background-position: 50%; 8 } 9 10 50% { 11 background-position: 50%; 12 } 13 14 90% { 15 background-position: 0%; 16 } 17 18 100% { 19 background-position: 0%; 20 } 21} 22 23.loader { 24 position: relative; 25 font-family: sans-serif; 26 display: flex; 27 height: auto; 28 width: auto; 29 letter-spacing: 3px; 30 align-items: center; 31 justify-content: center; 32 padding: 10px 12px; 33 font-size: 1.45em; 34 color: transparent; 35 background: linear-gradient(to right,#fff 33.3%,#008cdd 33.3%, #008cdd 66.6%, #fff 66.6%) no-repeat; 36 background-size: 300%; 37 background-position: 100%; 38 background-clip: text; 39 -webkit-background-clip: text; 40 animation: infinite 1.4s load-loop ease; 41} 42 43.loader::after { 44 content: ''; 45 width: 100%; 46 height: 100%; 47 position: absolute; 48 display: block; 49 background: linear-gradient(to right,#008cdd 33.3%, transparent 33.3% , transparent 66.6%, #008cdd 66.6%) no-repeat; 50 background-size: 300%; 51 background-position: 100%; 52 top: 0; 53 left: 0; 54 z-index: -1; 55 animation: infinite 1.4s load-loop ease; 56}
578 views
578 views
MIT License