什么是 ladda？
ladda 是一个前端 loading 组件，是一个 npm 包，可以让用户在后台处理数据时，展示一个动态的 loading 效果。这个包专门为 JavaScript 程序员提供了一个灵活、可定制的 loading 解决方案。
安装
可以通过 npm 安装 ladda：
npm install ladda
或者通过 CDN 引入：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/ladda-bootstrap/0.9.2/ladda-themeless.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/spin.js/1.3.3/spin.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/ladda-bootstrap/0.9.2/spin.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/ladda-bootstrap/0.9.2/ladda.min.js"></script>
使用
初始化
在使用 ladda 之前，我们需要先初始化按钮：
<button class="ladda-button" data-style="expand-left">Submit</button>
在 JavaScript 中，我们需要先实例化 Ladda 对象并将按钮元素作为参数传入：
var btn = document.querySelector('.ladda-button');
var l = Ladda.create(btn);开始和结束加载
当按钮被点击时，我们可以通过调用 ladda 实例的 start() 方法来显示 loading 动画：
l.start();
当数据处理完毕以后，我们可以调用 stop() 方法来隐藏 loading 动画：
l.stop();
定时加载
ladda 还提供了对定时器和超时的支持。
比如以下情况：
<button id="uiButton" class="ladda-button" data-style="slide-left">Delayed readout</button>
只要加载时间不超过 3 秒，就会显示动画效果。
可以用以下代码来实现:
-- -------------------- ---- -------
--- --- - ------------------------------------
--- - - ------------------
----------------------------- ---------- -
----------
--- ----------- - ---------- -
-- ----- ---- ----
--------------------- -
---------
-- ------
--
----------------------- ------
---这样就实现了在按钮被点击 3 秒后才显示 loading 动画的效果。
更多样式
除了前面使用的 expand-left 和 slide-left 样式之外，还有其他几种可用的样式：
-- -------------------- ---- ------- ------- -------------------- ---------------------- ----- ------------------------- --------- ----- ----------------------------- ---- ---------------------- ------------- ------------ --------- ------- -------------------- --------------------- ----- ------------------------ --------- ----- ----------------------------- ---- ---------------------- ------------- ------------ --------- ------- -------------------- -------------------------- ----- -------------------------- ------------ ----- ----------------------------- ---------
结论
ladda 是一个非常方便、易用的 loading 动画组件，可以帮助开发者在数据处理时提供更好的用户体验。希望本文对大家了解 ladda 的学习和实践提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb0cb5cbfe1ea0612536