Loader by vikramsinghnegi
#202628
1.loader-spanne-20 { 2 position: relative; 3 width: 100px; 4 height: 30px; 5 padding: 0; 6} 7.loader-spanne-20 > span { 8 position: absolute; 9 right: 0; 10 width: 3px; 11 height: 30px; 12 background-color: rgb(116, 204, 197); 13 display: block; 14 border-radius: 3px; 15 transform-origin: 50% 100%; 16 animation: move 2.8s linear infinite; 17} 18.loader-spanne-20 > span:nth-child(1) { 19 animation-delay: -0.4s; 20} 21.loader-spanne-20 > span:nth-child(2) { 22 animation-delay: -0.8s; 23} 24.loader-spanne-20 > span:nth-child(3) { 25 animation-delay: -1.2s; 26} 27.loader-spanne-20 > span:nth-child(4) { 28 animation-delay: -1.6s; 29} 30.loader-spanne-20 > span:nth-child(5) { 31 animation-delay: -2s; 32} 33.loader-spanne-20 > span:nth-child(6) { 34 animation-delay: -2.4s; 35} 36.loader-spanne-20 > span:nth-child(7) { 37 animation-delay: -2.8s; 38} 39@keyframes move { 40 0% { 41 opacity: 0; 42 transform: translateX(0px) rotate(0deg); 43 } 44 20% { 45 opacity: 1; 46 } 47 40% { 48 transform: translateX(-40px) rotate(0deg); 49 } 50 50% { 51 opacity: 1; 52 transform: translateX(-50px) rotate(22deg); 53 } 54 85% { 55 opacity: 1; 56 transform: translateX(-85px) rotate(60deg); 57 } 58 100% { 59 opacity: 0; 60 transform: translateX(-100px) rotate(65deg); 61 } 62} 63
295 views
295 views
MIT License