Loader by TemplateVentures
#212121
1.loader { 2 width: 350px; 3 height: 180px; 4 border-radius: 10px; 5 background: #fff; 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 justify-content: space-evenly; 10 padding: 30px; 11 box-shadow: 2px 2px 10px -5px lightgrey; 12} 13.loading { 14 width: 100%; 15 height: 10px; 16 background: lightgrey; 17 border-radius: 10px; 18 position: relative; 19 overflow: hidden; 20} 21.loading::after { 22 content: ""; 23 position: absolute; 24 top: 0; 25 left: 0; 26 width: 50%; 27 height: 10px; 28 background: #002; 29 border-radius: 10px; 30 z-index: 1; 31 animation: loading 0.6s alternate infinite; 32} 33label { 34 color: #002; 35 font-size: 18px; 36 animation: bit 0.6s alternate infinite; 37} 38 39@keyframes bit { 40 from { 41 opacity: 0.3; 42 } 43 to { 44 opacity: 1; 45 } 46} 47 48@keyframes loading { 49 0% { 50 left: -25%; 51 } 52 100% { 53 left: 70%; 54 } 55 0% { 56 left: -25%; 57 } 58} 59
449 views
Variation of aloader
MIT License