Do you love material design ? Here is a material design loader component created using pure CSS with one element.
The HTML
<div class="progress circular"></div>
The CSS
.progress.circular {
width: 60px;
height: 60px;
background-color: #c4000000;
mask-image: linear-gradient(transparent 50%, white 50%),
linear-gradient(to right, transparent 50%, white 50%);
-webkit-mask-image: linear-gradient(transparent 50%, white 50%),
linear-gradient(to right, transparent 50%, white 50%);
position: relative;
color: #3b49df;
animation: rotate 6s infinite;
}
.progress.circular:before {
content: "";
position: absolute;
inset:0;
border: solid 0.25em transparent;
border-top-color: currentColor;
border-radius: 100px;
background-color: transparent;
animation: rotate-shrink 0.75s infinite linear alternate;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(180deg);
animation-timing-function: linear;
}
25% {
transform: rotate(630deg);
}
37.5% {
transform: rotate(810deg);
animation-timing-function: linear;
}
50% {
transform: rotate(1260deg);
}
62.5% {
transform: rotate(1440deg);
animation-timing-function: linear;
}
75% {
transform: rotate(1890deg);
}
87.5% {
transform: rotate(2070deg);
animation-timing-function: linear;
}
100% {
transform: rotate(2520deg);
}
}
@keyframes rotate-shrink {
0% {
transform: rotate(-30deg);
}
29.4% {
border-left-color: transparent;
}
29.41% {
border-left-color: currentColor;
}
64.7% {
border-bottom-color: transparent;
}
64.71% {
border-bottom-color: currentColor;
}
100% {
border-left-color: currentColor;
border-bottom-color: currentColor;
transform: rotate(225deg);
}
}
The result
INFO: I've built a Material Design Framework https://material.pages.dev/ you can see this framework and give it a star 😎
Top comments (8)
it seems you tested your code only on Firefox, you need to add the prefixed version for the mask property to make it working on Chrome
Now It's fixed 😉 Thanks @afif
not really, you made it more complex now. You only need to prefix the mask property and keep the gradient as it is:
And please remove all the other prefixes you added to animations, they are useless.
🤦♂️
jsfiddle.net/cfvotynr/1/
👍
I've updated the code.
where do you see the "rudeness"? maybe you are not in the correct article
Thank you !! But don't tell @afif rude. Because @afif helped me.