#e8e8e8
1.loader { 2 width: 44.8px; 3 height: 44.8px; 4 color: #554cb5; 5 position: relative; 6 background: radial-gradient(11.2px,currentColor 94%,#0000); 7} 8 9.loader:before { 10 content: ''; 11 position: absolute; 12 inset: 0; 13 border-radius: 50%; 14 background: radial-gradient(10.08px at bottom right,#0000 94%,currentColor) top left, 15 radial-gradient(10.08px at bottom left ,#0000 94%,currentColor) top right, 16 radial-gradient(10.08px at top right,#0000 94%,currentColor) bottom left, 17 radial-gradient(10.08px at top left ,#0000 94%,currentColor) bottom right; 18 background-size: 22.4px 22.4px; 19 background-repeat: no-repeat; 20 animation: loader 1.5s infinite cubic-bezier(0.3,1,0,1); 21} 22 23@keyframes loader { 24 33% { 25 inset: -11.2px; 26 transform: rotate(0deg); 27 } 28 29 66% { 30 inset: -11.2px; 31 transform: rotate(90deg); 32 } 33 34 100% { 35 inset: 0; 36 transform: rotate(90deg); 37 } 38}
1K views
1K views
Comments
MIT License