210 views
1.loader { 2 margin: auto; 3 width: 100px; 4 height: 30px; 5 overflow: hidden; 6 position: relative; 7 background: rgba(0, 0, 0, 0.3); 8 border-radius: 5px; 9 box-shadow: 0px 35px 0 -5px #aaa, 0 -5px 0 0px #ddd, 0 -25px 0 -5px #fff, 10 -25px -30px 0 0px #ddd, -25px 30px 0 0px #ddd, 25px -30px 0 0px #ddd, 11 25px 30px 0 0px #ddd, 20px 10px 0 5px #ddd, 20px -10px 0 5px #ddd, 12 -20px -10px 0 5px #ddd, -20px 10px 0 5px #ddd; 13} 14 15.loader:after, 16.loader:before { 17 content: ""; 18 border-radius: 100%; 19 width: 35px; 20 height: 35px; 21 display: block; 22 position: absolute; 23 border: 4px dashed #fff; 24 bottom: -4px; 25 transform: rotate(0deg); 26 box-sizing: border-box; 27 animation: tape 4s linear infinite; 28} 29 30.loader:before { 31 right: 0; 32 box-shadow: 0 0 0 4px #fff, 0 0 0 34px #000; 33} 34 35.loader:after { 36 left: 0; 37 box-shadow: 0 0 0 4px #fff, 0 0 0 65px #000; 38} 39 40@keyframes tape { 41 0% { 42 transform: rotate(0deg) scale(0.4); 43 } 44 45 100% { 46 transform: rotate(-360deg) scale(0.4); 47 } 48} 49
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