Loader by vk-uiux
#212121
1.loader-inner { 2 width: 100px; 3 height: 60px; 4 margin: auto; 5 position: absolute; 6 inset: 0; 7} 8 9.loader-line-wrap { 10 animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; 11 width: 100px; 12 height: 50px; 13 left: 0; 14 overflow: hidden; 15 position: absolute; 16 top: 0; 17 transform-origin: 50% 100%; 18} 19 20.loader-line { 21 border: 4px solid transparent; 22 border-radius: 100%; 23 width: 100px; 24 height: 100px; 25 margin: 0 auto; 26 position: absolute; 27 inset: 0; 28} 29 30.loader-line-wrap:nth-child(1) { 31 animation-delay: -50ms; 32} 33 34.loader-line-wrap:nth-child(2) { 35 animation-delay: -100ms; 36} 37 38.loader-line-wrap:nth-child(3) { 39 animation-delay: -150ms; 40} 41 42.loader-line-wrap:nth-child(4) { 43 animation-delay: -200ms; 44} 45 46.loader-line-wrap:nth-child(5) { 47 animation-delay: -250ms; 48} 49 50.loader-line-wrap:nth-child(1) .loader-line { 51 border-color: #eb4747; 52 height: 90px; 53 width: 90px; 54 top: 7px; 55} 56 57.loader-line-wrap:nth-child(2) .loader-line { 58 border-color: #ebeb47; 59 height: 76px; 60 width: 76px; 61 top: 14px; 62} 63 64.loader-line-wrap:nth-child(3) .loader-line { 65 border-color: #47eb47; 66 height: 62px; 67 width: 62px; 68 top: 21px; 69} 70 71.loader-line-wrap:nth-child(4) .loader-line { 72 border-color: #47ebeb; 73 height: 48px; 74 width: 48px; 75 top: 28px; 76} 77 78.loader-line-wrap:nth-child(5) .loader-line { 79 border-color: #4747eb; 80 height: 34px; 81 width: 34px; 82 top: 35px; 83} 84 85@keyframes spin { 86 0%, 87 15% { 88 transform: rotate(0); 89 } 90 91 100% { 92 transform: rotate(360deg); 93 } 94}
673 views
673 views
MIT License