222 views
1.loader { 2 width: 96px; 3 height: 48px; 4 display: inline-block; 5 position: relative; 6 background: #5e5e5e; 7 border-radius: 48px 48px 0 0; 8 box-sizing: border-box; 9 overflow: hidden; 10} 11 12.loader::after { 13 content: ''; 14 box-sizing: border-box; 15 position: absolute; 16 width: 24px; 17 height: 12px; 18 border-radius: 24px 24px 0 0; 19 background: yellow; 20 left: 50%; 21 transform: translateX(-50%); 22 bottom: 0; 23} 24 25.loader::before { 26 content: ''; 27 position: absolute; 28 width: 4px; 29 height: 32px; 30 left: 0; 31 right: 0; 32 margin: auto; 33 bottom: 0; 34 background: yellow; 35 transform-origin: 50% 100%; 36 box-sizing: border-box; 37 animation: animloader 2s linear infinite alternate; 38} 39 40@keyframes animloader { 41 0% { 42 transform: rotate(-70deg); 43 } 44 45 10% { 46 transform: rotate(-40deg); 47 } 48 49 20%, 45%, 35% { 50 transform: rotate(-10deg); 51 } 52 53 40%, 30% { 54 transform: rotate(-30deg); 55 } 56 57 50%, 60% { 58 transform: rotate(20deg); 59 } 60 61 55%, 65%, 75% { 62 transform: rotate(40deg); 63 } 64 65 70% { 66 transform: rotate(45deg); 67 } 68 69 85%, 90% { 70 transform: rotate(50deg); 71 } 72 73 95% { 74 transform: rotate(75deg); 75 } 76 77 100%, 93% { 78 transform: rotate(70deg); 79 } 80}
Shoh2008
c0der
I'm Shoxruh. I'm Tajik. I can speak Russian, Uzbek, English. I live in Uzbekistan I was finishing an IT course. Experience as a Junior, front-end developer.
MIT License