分类: 技术

按钮加载效果实现

1. 背景

之前的加载大部分都是 toast 的形式,但现在一些 Native 的按钮点击都将加载动画做在了按钮上,给人感觉很好,比较常见的就是移动端支付宝的支付按钮,点击后有个旋转的圆圈表示加载。现在也来模拟一个该效果。

2. 实现

看到这种线段变化的动画,直接想到之前用的 svg 配合 strokeDasharray 属性来实现,具体效果如下:

See the Pen DynamicButton by zee (@bt404) on CodePen.

注:转载注明出处并联系作者,本文链接:https://nodefe.com/button-animation/

发表评论

评论