在移动应用程序和 Web 应用程序中，进度条是一种常见的 UI 元素，用于表示任务的进度。Material Design 是一种 Google 设计风格，它提供了一系列的设计指南和组件，用于创建美观和一致的用户界面。在本文中，我们将介绍如何在 Material Design 风格下创建进度条样式，并提供实现方法和示例代码。
Material Design 进度条样式
Material Design 风格下的进度条主要有两种样式：线性进度条和循环进度条。
线性进度条
线性进度条用于表示任务的进度，它通常是一个水平条，可以显示任务的完成百分比。线性进度条的颜色可以根据任务的状态进行变化。例如，当任务完成时，进度条可以变为绿色，当任务失败时，进度条可以变为红色。
下面是一个 Material Design 风格的线性进度条的示例代码：
-- -------------------- ---- -------
---- --------------------------- -------------------
---- --------------------------------------------------
---- ------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------在上面的示例代码中，我们使用了 Material Design 组件库中的 mdc-linear-progress 类来创建线性进度条。role="progressbar" 属性表示该元素是一个进度条。
线性进度条包含四个子元素：
mdc-linear-progress__buffering-dots：用于显示缓冲区状态的点。mdc-linear-progress__buffer：用于表示缓冲区的进度条。mdc-linear-progress__primary-bar：用于表示主要进度的进度条。mdc-linear-progress__secondary-bar：用于表示辅助进度的进度条。
循环进度条
循环进度条用于表示任务的进行状态，它通常是一个圆形，可以旋转显示任务的进行状态。循环进度条的颜色可以根据任务的状态进行变化。例如，当任务完成时，进度条可以变为绿色，当任务失败时，进度条可以变为红色。
下面是一个 Material Design 风格的循环进度条的示例代码：
-- -------------------- ---- -------
---- ----------------------------- -------------------
---- -----------------------------------------------------
---- --------------------------------------------------------- ---------- - -- --- -----------------------------------
------- ------------------------------------------------ ------- ------- ------ --------------------------
------- ------------------------------------------------- ------- ------- ------ ------------------------------------- -------------------------------------- --------------------------
------
------
---- -------------------------------------------------------
---- ---------------------------------------------
---- -------------------------------------------- ------------------------------------
---- --------------------------------------------
------
---- -----------------------------------------
---- --------------------------------------------
------
---- -------------------------------------------- -------------------------------------
---- --------------------------------------------
------
------
------
------在上面的示例代码中，我们使用了 Material Design 组件库中的 mdc-circular-progress 类来创建循环进度条。role="progressbar" 属性表示该元素是一个进度条。
循环进度条包含两个子元素：
mdc-circular-progress__determinate-container：用于表示确定进度的圆形图形。mdc-circular-progress__indeterminate-container：用于表示不确定进度的圆形图形。
Material Design 进度条实现方法
在实现 Material Design 风格的进度条时，我们可以使用以下方法：
使用 Material Design 组件库
Google 提供了一个名为 Material Components for the web 的组件库，它包含了许多 Material Design 风格的 UI 组件，包括进度条。我们可以使用该组件库来快速创建 Material Design 风格的进度条。
要使用 Material Components for the web 组件库，我们需要在 HTML 文件中添加以下代码：
-- -------------------- ---- -------
------
----- ---------------- ---------------------------------------------------------------------------------------------------- --
----- ---------------- -------------------------------------------------------------------------------------------------------- --
-------
------
---- ----- ---
---- --------------------------- ------------------ ------------------- -------- ---- ----------------- ----------------- ------------------
---- --------------------------------------------------
---- ------------------------------------------
---- ------------------------------- ----------------------------------
----- ----------------------------------------------
------
---- ------------------------------- ------------------------------------
----- ----------------------------------------------
------
------
---- ----- ---
---- ----------------------------- ------------------ ------------------- -------- ---- ----------------- ----------------- ------------------
---- -----------------------------------------------------
---- --------------------------------------------------------- ---------- - -- --- -----------------------------------
------- ------------------------------------------------ ------- ------- ------ --------------------------
------- ------------------------------------------------- ------- ------- ------ ------------------------------------- -------------------------------------- --------------------------
------
------
---- -------------------------------------------------------
---- ---------------------------------------------
---- -------------------------------------------- ------------------------------------
---- --------------------------------------------
------
---- -----------------------------------------
---- --------------------------------------------
------
---- -------------------------------------------- -------------------------------------
---- --------------------------------------------
------
------
------
------
------- ------------------------------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------------------------
--------
----- -------------- - --- ------------------------------------------------------------------
----- ---------------- - --- ----------------------------------------------------------------------
---------
-------在上面的示例代码中，我们从 CDN 引入了 Material Components for the web 组件库的 CSS 和 JavaScript 文件，然后创建了一个线性进度条和一个循环进度条的示例。
自定义 CSS 样式
如果我们不想使用 Material Components for the web 组件库，我们也可以根据 Material Design 风格的设计指南，自定义 CSS 样式来创建进度条。
下面是一个自定义 CSS 样式的线性进度条的示例代码：
<div class="progress-bar"> <div class="buffering-dots"></div> <div class="buffer"></div> <div class="bar primary-bar"></div> <div class="bar secondary-bar"></div> </div>
-- -------------------- ---- -------
------------- -
-------- -----
------------ -------
------ -----
------- ----
----------------- --------
-------------- ----
--------- -------
-
--------------- -
------ -----
------- -----
-------------- ----
----------------- --------
------------- ----
---------- --------- -- ---------
-
------- -
------ -----
------- -----
----------------- --------
--------- ---------
-------- --
-
------------ -
------ ---
------- -----
----------------- --------
--------- ---------
-------- --
----------- ----- ---- ---------
-
-------------- -
------ ---
------- -----
----------------- --------
--------- ---------
-------- --
----------- ----- ---- ---------
-
---------- --------- -
-- -
---------- -----------------
-
--- -
---------- ---------------
-
--- -
---------- ----------------
-
--- -
---------- ---------------
-
---- -
---------- -----------------
-
-在上面的示例代码中，我们创建了一个自定义 CSS 样式的线性进度条，它包含四个子元素：
buffering-dots：用于显示缓冲区状态的点。buffer：用于表示缓冲区的进度条。primary-bar：用于表示主要进度的进度条。secondary-bar：用于表示辅助进度的进度条。
我们使用 CSS 样式来设置进度条的样式和动画效果。
下面是一个自定义 CSS 样式的循环进度条的示例代码：
<div class="progress-bar"> <div class="spinner"></div> <div class="determinate-circle"></div> </div>
-- -------------------- ---- -------
------------- -
-------- -----
---------------- -------
------------ -------
------ -----
------- -----
--------- ---------
-
-------- -
------ -----
------- -----
-------------- ----
------- --- ----- ------- -- -- -----
----------------- --------
---------- ---- -- ------ ---------
-
------------------- -
------ -----
------- -----
-------------- ----
----- --------- ----- ----- ------
--------- ---------
----------- -----------
------- --- ----- ------- -- -- -----
----------------- --------
---------- -------------
-
---------- ---- -
-- -
---------- -------------
-
---- -
---------- ---------------
-
-在上面的示例代码中，我们创建了一个自定义 CSS 样式的循环进度条，它包含两个子元素：
spinner：用于表示循环进度的圆形图形。determinate-circle：用于表示确定进度的圆形图形。
我们使用 CSS 样式来设置进度条的样式和动画效果。
结论
本文介绍了 Material Design 风格下的进度条样式和实现方法，包括线性进度条和循环进度条。我们可以使用 Material Components for the web 组件库或自定义 CSS 样式来创建 Material Design 风格的进度条。这些方法可以帮助我们快速创建美观和一致的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6767ca1098e3e1ab1a7b135a