什么是 ladda？
ladda 是一个前端 loading 组件，是一个 npm 包，可以让用户在后台处理数据时，展示一个动态的 loading 效果。这个包专门为 JavaScript 程序员提供了一个灵活、可定制的 loading 解决方案。
安装
可以通过 npm 安装 ladda：
--- ------- -----
或者通过 CDN 引入：
----- ---------------- --------------------------------------------------------------------------------------- ------- ---------------------------------------------------------------------------- ------- --------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------
使用
初始化
在使用 ladda 之前，我们需要先初始化按钮：
------- -------------------- ----------------------------------------
在 JavaScript 中，我们需要先实例化 Ladda 对象并将按钮元素作为参数传入：
--- --- - ---------------------------------------- --- - - ------------------
开始和结束加载
当按钮被点击时，我们可以通过调用 ladda 实例的 start() 方法来显示 loading 动画：
----------
当数据处理完毕以后，我们可以调用 stop() 方法来隐藏 loading 动画：
---------
定时加载
ladda 还提供了对定时器和超时的支持。
比如以下情况：
------- ------------- -------------------- ------------------------------- ----------------
只要加载时间不超过 3 秒，就会显示动画效果。
可以用以下代码来实现:
--- --- - ------------------------------------
--- - - ------------------
----------------------------- ---------- -
----------
--- ----------- - ---------- -
-- ----- ---- ----
--------------------- -
---------
-- ------
--
----------------------- ------
---这样就实现了在按钮被点击 3 秒后才显示 loading 动画的效果。
更多样式
除了前面使用的 expand-left 和 slide-left 样式之外，还有其他几种可用的样式：
------- -------------------- ---------------------- ----- ------------------------- --------- ----- ----------------------------- ---- ---------------------- ------------- ------------ --------- ------- -------------------- --------------------- ----- ------------------------ --------- ----- ----------------------------- ---- ---------------------- ------------- ------------ --------- ------- -------------------- -------------------------- ----- -------------------------- ------------ ----- ----------------------------- ---------
结论
ladda 是一个非常方便、易用的 loading 动画组件，可以帮助开发者在数据处理时提供更好的用户体验。希望本文对大家了解 ladda 的学习和实践提供帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcb0cb5cbfe1ea0612536