순수 CSS 머티리얼 디자인 로더
9338 단어 csssnippetsmaterialdesign
HTML
<div class="progress circular"></div>
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);
}
}
결과
정보: 저는 Material Design Frameworkhttps://material.pages.dev/를 구축했습니다. 이 프레임워크를 보고 별점을 줄 수 있습니다 😎
Reference
이 문제에 관하여(순수 CSS 머티리얼 디자인 로더), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/posandu/pure-css-material-design-loader-2bg7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)