loading动画特效小结

在前端开发中，经常会使用页面加载过程中的loading动画来提升用户体验。本文将介绍一些常见的loading动画特效及实现方法。

1. 线性渐变旋转动画

这是一种简单而优美的动画，可以用CSS3的linear-gradient()函数来创建。

实现代码

-- -------------------- ---- -------
---------- ------ -
  -- - ---------- -------------- -
-

---------------- -
  ------ -----
  ------- -----
  ----------- ------------------ ------ -------- ---------
  -------------- ----
  ---------- ------ -- ------ ---------
-

效果演示

2. 滚动条模拟动画

利用CSS3的伪元素和animation属性，可以创建一个类似于滚动条的loading动画。

实现代码

-- -------------------- ---- -------
---------- ------ -
  -- - ---------- ------------------ -
  ---- - ---------- ----------------- -
-

--------------- -
  ------ -----
  ------- -----
  --------- ---------
  --------- -------
  ----------------- --------
-

---------------------- -
  -------- ---
  --------- ---------
  ---- --
  ----- --
  ------- --
  ------ --
  ----------- ------------------ ------ ------------ ----- -------------
  ---------- ------------------
  ---------- ------ -- ------ ---------
-

效果演示

3. 加载进度动画

加载进度动画可以通过在SVG图形上使用stroke-dasharray属性来实现。我们可以将stroke-dasharray的值设为整个路径的长度，然后使用animation属性来改变stroke-dashoffset的值来实现加载进度动画。

实现代码

-- -------------------- ---- -------
---------- -------- -
  -- - ------------------ -- -
-

----------------- -
  ------ -----
  ------- -----
  --------- ---------
-

----------------- --- -
  --------- ---------
  ---- --
  ----- --
  ---------- ---------------
-

----------------- ------ -
  ----- -----
  ------- --------
  ------------- --
  ----------------- ------
  ------------------ ------
  ---------- -------- -- ----------- ---------
-

效果演示

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/868