229 views
1.loader { 2 width: 175px; 3 height: 80px; 4 display: block; 5 margin: auto; 6 background-image: radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), radial-gradient(circle 50px at 50px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 25px 25px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0); 7 background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px; 8 background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px; 9 background-repeat: no-repeat; 10 position: relative; 11 box-sizing: border-box; 12} 13 14.loader::before { 15 content: ''; 16 left: 60px; 17 bottom: 18px; 18 position: absolute; 19 width: 36px; 20 height: 36px; 21 border-radius: 50%; 22 background-color: #FF3D00; 23 background-image: radial-gradient(circle 8px at 18px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, #FFF 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, #FFF 100%, transparent 0); 24 background-repeat: no-repeat; 25 box-sizing: border-box; 26 animation: rotationBack 3s linear infinite; 27} 28 29.loader::after { 30 content: ''; 31 left: 94px; 32 bottom: 15px; 33 position: absolute; 34 width: 24px; 35 height: 24px; 36 border-radius: 50%; 37 background-color: #FF3D00; 38 background-image: radial-gradient(circle 5px at 12px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, #FFF 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, #FFF 100%, transparent 0); 39 background-repeat: no-repeat; 40 box-sizing: border-box; 41 animation: rotationBack 4s linear infinite reverse; 42} 43 44@keyframes rotationBack { 45 0% { 46 transform: rotate(0deg); 47 } 48 49 100% { 50 transform: rotate(-360deg); 51 } 52}
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