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 库，可以在<head>标签中添加以下代码：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@material/circular-progress@3.0.0/dist/mdc.circular-progress.min.css" rel="stylesheet">
最后，在 JavaScript 中初始化组件：
import { MDCircularProgress } from '@material/circular-progress';
const progress = new MDCircularProgress(document.querySelector('.mdc-circular-progress'));
progress.determinate = true; // 确定状态
progress.progress = 0.5; // 中间填充程度示例演示
我们来看一下 Circular Progress 动画的效果：
Linear Progress
Linear Progress 是一种线性的 Loading 动画样式，它通常用于一些较短时间的操作，如表单的提交过程、页面的加载等。
实现方法
我们可以利用 Material Design 中提供的组件库，在 HTML 中添加以下代码来实现 Linear Progress：
-- -------------------- ---- -------
---- --------------------------- ------------------ ----------------- ----------------- ------------------
---- --------------------------------------------------
---- ------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------接着，需要引入 Material Design Web 库，可以在<head>标签中添加以下代码：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@material/linear-progress@3.0.0/dist/mdc.linear-progress.min.css">
最后，在 JavaScript 中初始化组件：
import { MDLinearProgress } from '@material/linear-progress';
const linearProgress = new MDLinearProgress(document.querySelector('.mdc-linear-progress'));
linearProgress.determinate = true; // 确定状态
linearProgress.progress = 0.5; // 中间填充程度示例演示
我们来看一下 Linear Progress 动画的效果：
总结
本文介绍了如何在 Material Design 中实现 Circular Progress 和 Linear Progress 两种 Loading 动画效果。要实现这些效果，我们需要利用 Material Design Web 库，并在 HTML 中添加必要的代码，也需要在 JavaScript 中初始化组件。
值得一提的是，这些动画效果并不只是看起来比较炫酷，它们实际上也有给用户提供反馈和提示的作用，同时也可以增强用户体验。所以，应用这些效果，不仅可以让你的应用更具吸引力和竞争力，更能让用户从中获得更佳的使用感受。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658fdc63eb4cecbf2d56b585