Loader by Shoh2008
#212121
1.loader { 2 width: 148px; 3 height: 148px; 4 border-radius: 50%; 5 margin: -64px auto 0; 6 background-color: #ccc; 7 background-image: radial-gradient(#fff 4px, #0000 0), 8 radial-gradient(#fff 4px, #0000 0), 9 radial-gradient(#fff 4px, #0000 0), 10 radial-gradient(#fff 4px, #0000 0); 11 background-position: 24px center, 8px center, -8px center, -24px center; 12 position: relative; 13 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15) inset; 14 animation: flash 1s linear infinite; 15} 16 17.loader::before , .loader::after { 18 content: ''; 19 position: absolute; 20 border: 1px solid #ccc; 21 border-top-color: #0000; 22 left: 50%; 23 top: 100%; 24 transform: translateX(-50%); 25 width: 16px; 26 height: 18px; 27 background: #fff; 28} 29 30.loader::before { 31 width: 0px; 32 height: 64px; 33 transform: translate(-50% , 18px); 34} 35 36@keyframes flash { 37 0% { 38 background-image: radial-gradient(#DDD 4px, #0000 0), 39 radial-gradient(#DDD 4px, #0000 0), 40 radial-gradient(#DDD 4px, #0000 0), 41 radial-gradient(#DDD 4px, #0000 0); 42 } 43 44 25% { 45 background-image: radial-gradient(#DDD 4px, #0000 0), 46 radial-gradient(#DDD 4px, #0000 0), 47 radial-gradient(#DDD 4px, #0000 0), 48 radial-gradient(#fff 4px, #0000 0); 49 } 50 51 50% { 52 background-image: radial-gradient(#DDD 4px, #0000 0), 53 radial-gradient(#DDD 4px, #0000 0), 54 radial-gradient(#fff 4px, #0000 0), 55 radial-gradient(#fff 4px, #0000 0); 56 } 57 58 75% { 59 background-image: radial-gradient(#DDD 4px, #0000 0), 60 radial-gradient(#fff 4px, #0000 0), 61 radial-gradient(#fff 4px, #0000 0), 62 radial-gradient(#fff 4px, #0000 0); 63 } 64 65 100% { 66 background-image: radial-gradient(#fff 4px, #0000 0), 67 radial-gradient(#fff 4px, #0000 0), 68 radial-gradient(#fff 4px, #0000 0), 69 radial-gradient(#fff 4px, #0000 0); 70 } 71}
821 views
821 views
MIT License