Loader by Bodyhc
#e8e8e8
1.custom-loader { 2 width: 50px; 3 height: 50px; 4 display: grid; 5 border-radius: 50%; 6 -webkit-mask: radial-gradient(farthest-side,#0000 40%,#000 41%); 7 background: linear-gradient(0deg ,#766DF480 50%,#766DF4FF 0) center/4px 100%, 8 linear-gradient(90deg,#766DF440 50%,#766DF4BF 0) center/100% 4px; 9 background-repeat: no-repeat; 10 animation: s3 1s infinite steps(12); 11} 12 13.custom-loader::before, 14.custom-loader::after { 15 content: ""; 16 grid-area: 1/1; 17 border-radius: 50%; 18 background: inherit; 19 opacity: 0.915; 20 transform: rotate(30deg); 21} 22 23.custom-loader::after { 24 opacity: 0.83; 25 transform: rotate(60deg); 26} 27 28@keyframes s3 { 29 100% { 30 transform: rotate(1turn) 31 } 32}
1K views
1K views
MIT License