Loader by Shoh2008
#212121
1.loader { 2 position: relative; 3 width: 120px; 4 height: 140px; 5 background-image: radial-gradient(circle 30px, #fff 100%, transparent 0), 6 radial-gradient(circle 5px, #fff 100%, transparent 0), 7 radial-gradient(circle 5px, #fff 100%, transparent 0), 8 linear-gradient(#FFF 20px, transparent 0); 9 background-position: center 127px , 94px 102px , 16px 18px, center 114px; 10 background-size: 60px 60px, 10px 10px , 10px 10px , 4px 14px; 11 background-repeat: no-repeat; 12 z-index: 10; 13 perspective: 500px; 14} 15 16.loader::before { 17 content: ''; 18 position: absolute; 19 width: 100px; 20 height: 100px; 21 border-radius: 50%; 22 border: 3px solid #fff; 23 left: 50%; 24 top: 50%; 25 transform: translate(-50%, -55%) rotate(-45deg); 26 border-right-color: transparent; 27 box-sizing: border-box; 28} 29 30.loader::after { 31 content: ''; 32 position: absolute; 33 height: 80px; 34 width: 80px; 35 transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg); 36 left: 50%; 37 top: 50%; 38 box-sizing: border-box; 39 border: 7px solid #FF3D00; 40 border-radius: 50%; 41 animation: rotate_4191 0.5s linear infinite; 42} 43 44@keyframes rotate_4191 { 45 to { 46 transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg) 47 } 48}
773 views
773 views
MIT License