Loading动画的最佳实现方式

点击上方 "程序员小乐"关注, 星标或置顶一起成长

每天凌晨00点00分, 第一时间与你相约

每日英文

Maturity not to see how old you, but your shoulders strong enough to see multiple responsibilities.

成熟不是看你的年龄有多大，而是看你的肩膀能挑起多重的责任。

每日掏心话

每个人的性格中，都有某些无法让人接受的部分，再美好的人也一样。所以不要苛求别人，也不要埋怨自己。

来自：一只有趣的程序猿 | 责编：乐乐

链接：jianshu.com/p/593e1480ecaa

程序员小乐(ID:study_tech)第 749 次推文   图片来自 Pexels

往日回顾：万字长文！Unix 和 Linux 你不知道的那些历史（详解版）

   正文   

Loading动画是一个项目中必不可少的部分，一个好的Loading动画不仅可以让UI界面更加友好，更可以缓解用户等待加载的焦虑情绪，从而提升用户体验。

目前对于前端而言，实现loading动画的方法大致有几种：

• 直接插入GIF图片

• CSS制作loading动画

• SVG格式的loading动画

在我过往的项目经历中，这几种方法我都使用过，但是各有利弊。

GIF图片直接插入无疑是最简单的，但是不免出现图片占用空间大，替换成本高，网络慢的时候出现loading动画延迟加载的情况，大大降低用户的体验；CSS制作的动画设计空间比较大，前端工作，因为是CSS代码实现，所以占用空间不大，而且流畅度以及体验都很好；SVG在绘制路径上非常灵活，实现动画十分容易，用来做loading动画反而有点大材小用了。

在平时的项目中，我更倾向于使用最后一种方法。个人认为是最佳的实现方法，以下为大家分享前端制作一个简单的loading动画并使用的方法。

1. 寻找素材

推荐 loading.io 这个网站可以高度定制你的loading，包括搭配的颜色、大小、速度等。

loading.io

2. 导出成Base64格式

找到你喜欢的动画并调整到合适的样式后。紧接着需要导出成svg格式，这里注意，因为部分的loading动画需要收费，要知道！我们是做前端的（滑稽），这是你需要：

1.打开控制台点击选择标签
2.选择点击你调整好的动画
3.将SVG标签整个复制下来
4.新建空的.svg文件并将复制下来的SVG粘贴进去
5.打开 在线转换Base64 将.svg文件转换成 Base64编码  sojson.com/image2base64.html

复制SVG标签

3. 在你的网页上使用动画

有两种使用方式，一种是css方式；一种是直接img标签引用。

.box{
  background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}

<img src="data:image/jpg;base64,/9j/4QMZR..." />

成品见下图

最终效果

欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，学习能力的提升上有新的认识，欢迎转发分享给更多人。

欢迎各位读者加入程序员小乐技术群，在公众号后台回复“加群”或者“学习”即可。

猜你还想看

阿里、腾讯、百度、华为、京东最新面试题汇集

前后端分离开发，六大方案全揭秘：HTTP API 认证授权术

浓缩就是精华！106页的《Python进阶》中文版（附下载）

终于明白为什么要加 final 关键字了！

关注「程序员小乐」，收看更多精彩内容

嘿，你在看吗？