Loader by vinodjangid07
#e8e8e8
1.loader { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5} 6.wrapper { 7 width: 180px; 8 height: 50px; 9 position: relative; 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 z-index: 2; 14} 15.text { 16 z-index: 3; 17 font-family: Whitney, -apple-system, Helvetica; 18 letter-spacing: 1px; 19 font-weight: 700; 20 font-size: 20px; 21 color: white; 22 filter: drop-shadow(2px 2px 0px #ff9e02); 23} 24.box { 25 width: 100%; 26 height: 100%; 27 background-color: #ef5d2e; 28 position: absolute; 29 z-index: 2; 30 display: flex; 31 align-items: center; 32 justify-content: center; 33 animation: loading ease-in-out 0.9s infinite alternate-reverse; 34} 35@keyframes loading { 36 0% { 37 transform: translateX(-20px); 38 } 39 100% { 40 transform: translateX(20px); 41 } 42} 43.box::before { 44 content: ""; 45 width: 20px; 46 height: 170%; 47 background-color: #ff9d0089; 48 position: absolute; 49 z-index: 1; 50 animation: loading2 ease-in-out 0.9s infinite alternate-reverse; 51} 52@keyframes loading2 { 53 0% { 54 transform: translateX(-50px); 55 } 56 100% { 57 transform: translateX(50px); 58 } 59} 60
417 views
417 views
MIT License