This content originally appeared on DEV Community and was authored by Posandu Mapa
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 {
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
INFO: I've built a Material Design Framework https://material.pages.dev/ you can see this framework and give it a star ?
This content originally appeared on DEV Community and was authored by Posandu Mapa
Posandu Mapa | Sciencx (2021-07-28T04:23:13+00:00) Pure CSS Material design loader. Retrieved from https://www.scien.cx/2021/07/28/pure-css-material-design-loader/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.