Loader by fanishah
#212121
1.loader { 2 top: 50%; 3 left: 50%; 4 transform: translate(-50%, -50%); 5 position: absolute; 6} 7 8.bar { 9 width: 10px; 10 height: 70px; 11 background: hsl(0, 100%, 50%); 12 display: inline-block; 13 transform-origin: bottom center; 14 border-top-right-radius: 20px; 15 border-top-left-radius: 20px; 16 animation: loader8913 1.2s linear infinite; 17} 18 19.bar1 { 20 animation-delay: 0.1s; 21} 22 23.bar2 { 24 animation-delay: 0.2s; 25} 26 27.bar3 { 28 animation-delay: 0.3s; 29} 30 31.bar4 { 32 animation-delay: 0.4s; 33} 34 35.bar5 { 36 animation-delay: 0.5s; 37} 38 39.bar6 { 40 animation-delay: 0.6s; 41} 42 43.bar7 { 44 animation-delay: 0.7s; 45} 46 47.bar8 { 48 animation-delay: 0.8s; 49} 50 51@keyframes loader8913 { 52 0% { 53 transform: scaleY(0.1); 54 } 55 56 50% { 57 transform: scaleY(1); 58 background: yellowgreen; 59 } 60 61 100% { 62 transform: scaleY(0.1); 63 background: transparent; 64 } 65} 66
1.1K views
1.1K views
MIT License