Skip to content
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

Open
shfshanyue opened this issue Nov 16, 2019 · 10 comments
Open

【Q034】如何实现一个 loading 动画 #35

shfshanyue opened this issue Nov 16, 2019 · 10 comments
Labels

Comments

@shfshanyue
Copy link
Owner

如何实现一个 loading 动画,可用 css 或 svg

@shfshanyue shfshanyue added the css label Nov 16, 2019
@chen-rongliang
Copy link

svg比较实在

@hellojackhui
Copy link

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;
  }
}

@jak983464779
Copy link

transform 单词写错了吧

@chen-rongliang
Copy link

transform 单词写错了吧

应该是,随手写的,没留意拼写。

@02220
Copy link

02220 commented Nov 17, 2020

我直接copy,把错的单词更改了也不效果

@chen-rongliang
Copy link

我直接copy,把错的单词更改了也不效果

IDE补全多填了些文字....你把svg和circle的classname改成class就好了

@02220
Copy link

02220 commented Nov 17, 2020

我直接copy,把错的单词更改了也不效果

IDE补全多填了些文字....你把svg和circle的classname改成class就好了

尴尬了,这么低级的错误

@hwb2017
Copy link

hwb2017 commented Sep 7, 2021

通过svg实现的简单Loading动画
https://codepen.io/hwb2017/pen/XWgNVyr

@Indusy
Copy link

Indusy commented May 25, 2022

用的伪元素
https://codepen.io/indusy/pen/BaYmBXo

@Tsukishima1
Copy link

写了三个简单的loading作参考
https://codepen.io/Tsukishima1/pen/MWRqdgJ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants