在前端开发中，我们时常需要展示加载状态，以告知用户正在执行某些操作。而 eks-loading 就是一款轻量的加载组件，可以帮助我们快速创建加载动画。
安装
在使用前，需要先安装 eks-loading。
npm install eks-loading
基础用法
通过 import 引入组件，然后在需要展示加载状态的地方添加 eks-loading 标签即可。
import EksLoading from 'eks-loading'; // 为某个元素添加加载状态 <div id="my-div"> <EksLoading></EksLoading> </div>
配置选项
当然，eks-loading 还支持多种配置选项，可以根据具体需求进行参数定制。
颜色
通过 color 属性可以改变加载动画的颜色。默认值是白色。
<EksLoading color="#4CAF50"></EksLoading>
大小
通过 size 属性可以改变加载动画的大小。默认值是 40px。
<EksLoading size="30px"></EksLoading>
形单双字
通过 type 属性可以改变加载动画的形状，可以是圆形、长方形、双字等几种形式。默认值是圆形。
<EksLoading type="circular"></EksLoading> <EksLoading type="rectangular"></EksLoading> <EksLoading type="double"></EksLoading> // 形单双字
事件
eks-loading 还支持两个事件：start 和 stop。当加载动画开始时，会触发 start 事件；当加载动画结束时，会触发 stop 事件。
<EksLoading @start="onLoadingStart" @stop="onLoadingStop"></EksLoading>
总结
eks-loading 是一款非常实用且易用的前端加载组件，能够让我们在项目开发中更便捷地展示加载状态。通过本文的介绍和示例代码，您可以快速掌握 eks-loading 的使用方法，并灵活运用到自己的项目中去。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730381e8991b448e92bb