Material Design 是一种基于 Google 设计理念的界面设计语言,被广泛应用于现代化的 Web 应用和移动应用的设计中。其中,Loading 动画是在应用的各种操作和交互中非常常见的一种元素,能够让用户更好地理解操作的进度和状态。
本文将介绍如何实现 Material Design 中的 Loading 动画效果,包括两种常见的动画效果:Circular Progress 和 Linear Progress。
Circular Progress
Circular Progress 是一种圆形的 Loading 动画样式,它通常用于一些需要较长时间的操作,如网络请求、数据加载等,也可以用于一些需要暂停和继续的操作,如视频播放等。
实现方法
我们可以利用 Material Design 中提供的组件库,在 HTML 中添加以下代码来实现 Circular Progress:
---- ----------------------------- ------------------ -------------------- -------- ---- ----------------- ----------------- ------------------ ---- ----------------------------------------------------- ---- --------------------------------------------------------- ---------- - -- --- ------------------- ------- ------------------------------------------------ ------- ------- -------- --------------------- ------- ------------------------------------------------- ------- ------- -------- ------------------------- --------------------- --------------------- ------ ---- ----------------------------------------------------------- ---- ------------------------------------------------------- ------ ---- ----------------------------------------------------------------- ------ ---- ------------------------------------------------------ --------------- ------- ---- --------------------------------------------- ---- -------------------------------------------- ------------------------------------ ---- -------------------------------------------------------- ---------- - -- ---- ------- ------- ------- -------- ----------- ---------------- ------------------------ ------ ------ ---- ----------------------------------------- ---- ------------------------------------------------------------- ---------- - -- ---- ------- ------- ------- -------- ----------- ---------------- ------------------------ ------ ------ ---- -------------------------------------------- ------------------------------------- ---- --------------------------------------------------------- ---------- - -- ---- ------- ------- ------- -------- ----------- ---------------- ------------------------ ------ ------ ------ ------ ------
接着,需要引入 Material Design Web 库,可以在标签中添加以下代码:
----- -------------------------------------------------------------- ----------------- ----- -------------------------------------------------------------------------------------------------------- -----------------
最后,在 JavaScript 中初始化组件:
------ - ------------------ - ---- ------------------------------ ----- -------- - --- --------------------------------------------------------------------- -------------------- - ----- -- ---- ----------------- - ---- -- ------
示例演示
我们来看一下 Circular Progress 动画的效果:
Linear Progress
Linear Progress 是一种线性的 Loading 动画样式,它通常用于一些较短时间的操作,如表单的提交过程、页面的加载等。
实现方法
我们可以利用 Material Design 中提供的组件库,在 HTML 中添加以下代码来实现 Linear Progress:
---- --------------------------- ------------------ ----------------- ----------------- ------------------ ---- -------------------------------------------------- ---- ------------------------------------------ ---- ------------------------------- ---------------------------------- ----- ---------------------------------------------- ------ ---- ------------------------------- ------------------------------------ ----- ---------------------------------------------- ------ ------
接着,需要引入 Material Design Web 库,可以在标签中添加以下代码:
----- -------------------------------------------------------------- ----------------- ----- -----------------------------------------------------------------------------------------------------
最后,在 JavaScript 中初始化组件:
------ - ---------------- - ---- ---------------------------- ----- -------------- - --- ----------------------------------------------------------------- -------------------------- - ----- -- ---- ----------------------- - ---- -- ------
示例演示
我们来看一下 Linear Progress 动画的效果:
总结
本文介绍了如何在 Material Design 中实现 Circular Progress 和 Linear Progress 两种 Loading 动画效果。要实现这些效果,我们需要利用 Material Design Web 库,并在 HTML 中添加必要的代码,也需要在 JavaScript 中初始化组件。
值得一提的是,这些动画效果并不只是看起来比较炫酷,它们实际上也有给用户提供反馈和提示的作用,同时也可以增强用户体验。所以,应用这些效果,不仅可以让你的应用更具吸引力和竞争力,更能让用户从中获得更佳的使用感受。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/658fdc63eb4cecbf2d56b585