DEV Community

Cover image for Pure CSS Material design loader
Posandu
Posandu

Posted on • Originally published at tronic247.com

Pure CSS Material design loader

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>
Enter fullscreen mode Exit fullscreen mode

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);
  }
}

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
afif profile image
Temani Afif

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

Collapse
 
posandu profile image
Posandu

Now It's fixed 😉 Thanks @afif

Collapse
 
afif profile image
Temani Afif

not really, you made it more complex now. You only need to prefix the mask property and keep the gradient as it is:

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%);
Enter fullscreen mode Exit fullscreen mode

And please remove all the other prefixes you added to animations, they are useless.

Thread Thread
 
posandu profile image
Posandu • Edited

🤦‍♂️

Thread Thread
 
afif profile image
Temani Afif
Thread Thread
 
posandu profile image
Posandu

👍

I've updated the code.

Collapse
 
afif profile image
Temani Afif • Edited

where do you see the "rudeness"? maybe you are not in the correct article

Collapse
 
posandu profile image
Posandu

Thank you !! But don't tell @afif rude. Because @afif helped me.