This post is saved as a draft.
#212121
1.loader { 2 width: 48px; 3 height: 48px; 4 display: block; 5 margin: 20px auto; 6 box-sizing: border-box; 7 position: relative; 8} 9 10.loader::after { 11 content: ''; 12 width: 48px; 13 height: 48px; 14 left: 0; 15 bottom: 0; 16 position: absolute; 17 border-radius: 50% 50% 0; 18 border: 15px solid red; 19 transform: rotate(45deg) translate(0, 0); 20 box-sizing: border-box; 21 animation: animMarker 0.4s ease-in-out infinite alternate; 22} 23 24.loader::before { 25 content: ''; 26 box-sizing: border-box; 27 position: absolute; 28 left: 0; 29 right: 0; 30 margin: auto; 31 top: 150%; 32 width: 24px; 33 height: 4px; 34 border-radius: 50%; 35 background: rgba(0, 0, 0, 0.2); 36 animation: animShadow 0.4s ease-in-out infinite alternate; 37} 38 39@keyframes animMarker { 40 0% { 41 transform: rotate(45deg) translate(5px, 5px); 42 } 43 44 100% { 45 transform: rotate(45deg) translate(-5px, -5px); 46 } 47} 48 49@keyframes animShadow { 50 0% { 51 transform: scale(0.5); 52 } 53 54 100% { 55 transform: scale(1); 56 } 57} 58
Variation of aloader
Variation of aloader