New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
【Q034】如何实现一个 loading 动画 #35
Labels
Comments
svg比较实在 |
svg实现方案<svg classname="loading" viewbox="25 25 50 50">
<circle cx="50" cy="50" r="25" classname="path" fill="none" />
</svg> .loading {
width: 50px;
height: 50px;
animation: rotate 2s linear 0s infinite;
}
.path {
animation: dash 2s ease-in-out infinite;
stroke: #00b390;
stroke-width: 2;
stroke-dasharray: 90 150;
stroke-dashoffset: 0;
stroke-linecap: round;
}
@keyframes rotate {
from {
tranform: rotate(0deg);
}
to {
tranform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90 150;
stroke-dashoffset: -120px;
}
} |
transform 单词写错了吧 |
应该是,随手写的,没留意拼写。 |
我直接copy,把错的单词更改了也不效果 |
IDE补全多填了些文字....你把svg和circle的classname改成class就好了 |
尴尬了,这么低级的错误 |
通过svg实现的简单Loading动画 |
写了三个简单的loading作参考 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
如何实现一个 loading 动画,可用 css 或 svg
The text was updated successfully, but these errors were encountered: