Loader by Shoh2008
#212121
1.loader { 2 width: 106px; 3 height: 56px; 4 display: block; 5 margin: 30px auto; 6 background-image: linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), linear-gradient(#e1e1e1 50px, transparent 0), radial-gradient(circle 14px, #e1e1e1 100%, transparent 0); 7 background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px; 8 background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px; 9 background-repeat: no-repeat; 10 position: relative; 11 transform: rotate(-45deg); 12 box-sizing: border-box; 13} 14 15.loader::after, 16.loader::before { 17 content: ''; 18 position: absolute; 19 width: 56px; 20 height: 56px; 21 border: 6px solid #e1e1e1; 22 border-radius: 50%; 23 left: -45px; 24 top: -10px; 25 background-repeat: no-repeat; 26 background-image: linear-gradient(#e1e1e1 64px, transparent 0), linear-gradient(#e1e1e1 66px, transparent 0), radial-gradient(circle 4px, #e1e1e1 100%, transparent 0); 27 background-size: 40px 1px , 1px 40px, 8px 8px; 28 background-position: center center; 29 box-sizing: border-box; 30 animation: bike 0.3s linear infinite; 31} 32 33.loader::before { 34 left: 25px; 35 top: 60px; 36} 37 38@keyframes bike { 39 0% { 40 transform: rotate(0deg); 41 } 42 43 100% { 44 transform: rotate(360deg); 45 } 46}
1.3K views
1.3K views
MIT License