DEV Community

loading...
Cover image for Pure CSS Material design loader

Pure CSS Material design loader

Posandu
I'm Posandu 👋 Contact me at posandu[@]tronic247.com. Visit my website https://www.tronic247.com/
Originally published at tronic247.com ・1 min read

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 😎

Discussion (9)

Collapse
neill45675728 profile image
Neill

@afif Constructive criticism is good but what I don't get is the need for rudeness. In addition, the kid is 13 and was brave enough to post his work online. It costs absolutely nothing to be nice.

@posandu Thank you for this. It's exactly what I needed.

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 Author

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

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 Author

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 Author • Edited

🤦‍♂️

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

👍

I've updated the code.