Loaders 为开发者提供免费动态载入图示 React、HTML、CSS 程式码

如果在开发网站、应用程序或软件专案时需要读取中的动态图示，UI Ball 有个名为「Loaders」网站收录 24 种类型独特、可自订且轻量化的载入动态图，Loaders 也是一个 React.js 套件资料库，打开网站就能在在线直接预览这些很眼熟的动画图，对于要取用拿去开发专案来说非常有用，也不用上网到处寻找动态图，Loaders 所有动态图示都有提供对应的 React、HTML 和 CSS 原始码。

依照说明，Loaders 有 24 种独特、有趣且适用于各种情境的动态载入图，使用者可依照专案进行各种自订，像是尺寸大小、颜色、线宽和速度，图示部分非常轻量化，单一文件在压缩后小于 1 kb，而且没有任何 GIF 图档，完全使用现代化 CSS 和 SVG 建构。

Loaders
https://uiball.com/loaders

使用教程

STEP 1

打开 Loaders 网站会看到 GitHub 和 npm 链结，往下捲动会有以 npm 新增、汇入套件的指令，继续往下拖曳就会看到这些读取中的动态图示。

STEP 2

有些读取中的动态图看起来非常熟悉，也有一些很引人注目、很可爱很特别，从右上角切换不同检视模式，因为数量不是太多，直接浏览应该就可以了。

那么大家也或许可以猜到动态图的功能吧？为了让使用者有更好的使用体验，同时在等待时不会那么无聊（提醒使用者真的在载入中，不要随意跳离此画面），适当使用类似的过场动画有助于让使用者的感受较好，也有一种更为流畅快速的感觉。

STEP 3

点选图示图案后会有更大的预览图，点选左上角「Source」显示原始码，Loaders 会有 React 是用的语法，或是 HTML、CSS 样式表。

点选后就会快速复制到剪贴簿。

值得一试的三个理由：

1. Loaders 收录超过 24 种独特、可自订且轻量化的动态载入图示
2. 自订图示的尺寸大小、颜色、线宽和速度，单一文件压缩后小于 1 kb
3. 网站提供 React、HTML 和 CSS 程序码快速复制