Create a material design loader with pure CSS

July 28, 2021

Updated on June 13, 2024

css, html-tutorials, tricks-and-tips

Create a material design loader with pure CSS

Do you love material design ? Here is a material design loader component created using pure CSS with one element.

The HTML

html
<div class="progress circular"></div>

The CSS

css
.progress.circular {
appearance: none;
box-sizing: border-box;
width: 60px;
height: 60px;
background-color: #c4000000;
padding: 0px;
mask-image: linear-gradient(transparent 50%, white 50%),
linear-gradient(to right, transparent 50%, white 50%);
position: relative;
overflow: hidden;
display: block;
color: #3b49df;
animation: rotate 6s infinite;
}
.progress.circular:before {
content: '';
box-sizing: border-box;
border: solid 0.25em transparent;
border-top-color: currentColor;
border-radius: 100px;
background-color: transparent;
animation: rotate-shrink 0.75s infinite linear alternate;
display: block;
height: 60px;
width: 60px;
position: absolute;
top: 0;
left: 0;
}
@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

Found a spelling error or something wrong with this article? Edit this page on GitHub and make a PR!

Comments

Related Posts