学习 SVG CSS 安卓加载动画

See the Pen Android Loading – Fork from Daum Redesign by Wen Yan (@yanwen) on CodePen.

https://static.codepen.io/assets/embed/ei.js


SVG 描述圆形,并使用 CSS 控制该 SVG 的 stroke-dasharraystroke-dashoffset

其中 stroke-dasharray 即点画线,stroke-dashoffset 指定 dash 到路径开始的距离,使用这两者创造出圆形绘制轨迹,与此同时加上 ease 动画再 linear rotate,即可实现该动画。

Stylus:

// vars
blue = #6290f9
green =  #acc728
yellow = #fbb52b
red = #ee615d

stroke-dasharray-list = 1 85 85
stroke-dashoffset-list = 0 -25 -93

color-list = blue green yellow red blue

// loader
.circle-loader
  margin-left 48%
  fill transparent
  stroke #009688
  stroke-width 5
  animation 
    dash 1.5s ease infinite,
    rotate 2s linear infinite,
    color 8s linear infinite

// keyframes
@keyframes dash
  for i in 0..2
    { 50% * i }
      stroke-dasharray stroke-dasharray-list[i], 95
      stroke-dashoffset stroke-dashoffset-list[i]

@keyframes rotate
  for i in 0..1
    { 100% * i }
      transform rotate(i * 360 deg)

@keyframes color
  for i in 0..4
    { 25% * i }
      stroke color-list[i]

参考:

  1. www.runoob.com/svg/svg-stroke.html

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s