Loader by JaydipPrajapati1910
#212121
1.loader { 2 background: linear-gradient(to right, #2cc16f 50%, #fafafa 50%); 3 border-radius: 100%; 4 height: 70px; 5 width: 70px; 6 animation: loader-circle-time 8s steps(800, start) infinite; 7} 8 9.loader:after { 10 content: ""; 11 border-radius: 100% 0 0 100% / 50% 0 0 50%; 12 height: 100%; 13 left: 0; 14 position: absolute; 15 top: 0; 16 width: 50%; 17 animation: loader-circle-mask 8s steps(250, start) infinite; 18 transform-origin: 100% 50%; 19} 20 21@keyframes loader-circle-time { 22 100% { 23 transform: rotate(360deg); 24 } 25} 26 27@keyframes loader-circle-mask { 28 0% { 29 background: #fafafa; 30 transform: rotate(0deg); 31 } 32 33 50% { 34 background: #fafafa; 35 transform: rotate(-180deg); 36 } 37 38 50.01% { 39 background: #2cc16f; 40 transform: rotate(0deg); 41 } 42 43 100% { 44 background: #2cc16f; 45 transform: rotate(-180deg); 46 } 47} 48 49 50
611 views
611 views
MIT License