我正在尝试模仿 loader/Progress spinner从 Angular Material 。到目前为止,我制作了以下组件。但我不知道为什么破折号的长度没有改变。
body {
background-color: white;
}
// demo-specific
.showbox {
position: absolute;
}
// end demo-specific
.loader {
position: relative;
margin: 0 auto;
width: 100px;
&:before {
content: '';
display: block;
padding-top: 100%;
}
}
.circular {
animation: rotate 2s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.path {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 2s ease-in-out infinite;
stroke-linecap: round;
stroke: #0057e7;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 20, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 100, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 200, 200;
stroke-dashoffset: -125px;
}
}
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>
</div>
</div>
最佳答案
在我看来,这个问题看起来像是从 0% 直接到 50%,从 0% 到 10% 等等的例子在哪里等等。只需在 0 到 50% 之间包含更多步骤。
关于html - CSS loader/Progress spinner Material angular 2+,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50762238/