#212121
1.loader { 2 position: relative; 3 width: 150px; 4 height: 150px; 5 background: transparent; 6 border-radius: 50%; 7 box-shadow: 25px 25px 75px rgba(0,0,0,0.55); 8 border: 1px solid #333; 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 overflow: hidden; 13} 14 15.loader::before { 16 content: ''; 17 position: absolute; 18 inset: 20px; 19 background: transparent; 20 border: 1px dashed#444; 21 border-radius: 50%; 22 box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25), 23 inset 5px 5px 35px rgba(0,0,0,0.25); 24} 25 26.loader::after { 27 content: ''; 28 position: absolute; 29 width: 50px; 30 height: 50px; 31 border-radius: 50%; 32 border: 1px dashed#444; 33 box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25), 34 inset 5px 5px 35px rgba(0,0,0,0.25); 35} 36 37.loader span { 38 position: absolute; 39 top: 50%; 40 left: 50%; 41 width: 50%; 42 height: 100%; 43 background: transparent; 44 transform-origin: top left; 45 animation: radar81 2s linear infinite; 46 border-top: 1px dashed #fff; 47} 48 49.loader span::before { 50 content: ''; 51 position: absolute; 52 top: 0; 53 left: 0; 54 width: 100%; 55 height: 100%; 56 background: seagreen; 57 transform-origin: top left; 58 transform: rotate(-55deg); 59 filter: blur(30px) drop-shadow(20px 20px 20px seagreen); 60} 61 62@keyframes radar81 { 63 0% { 64 transform: rotate(0deg); 65 } 66 67 100% { 68 transform: rotate(360deg); 69 } 70}
Comments
Variations
3 MIT License