Material Design 风格下实现循环进度条的方法

阅读时长 13 min read

在现代 Web 开发中，Material Design 已经成为一种非常流行的设计风格，特别是在移动端应用和响应式网站中。不令人惊讶的是，越来越多的网站开始体验 Material Design 的视觉语言和交互效果。其中，循环进度条是 Material Design 风格中非常受欢迎的一个。

循环进度条不仅美观，而且功能性强大。它可以用来表示长时间加载、处理和请求数据的过程，让用户感觉到你的网站正在积极工作。在本文中，我们将详细探讨实现 Material Design 风格下的循环进度条的方法，包括 HTML、CSS 和 JavaScript。

HTML 结构

在 HTML 中，我们将使用一个简单的 div 元素来作为进度条的容器。在此基础上，我们将添加一些额外的 div 元素来表示循环进度条的每个分段。

如上所示，我们首先创建一个名为 md-progress-container 的 div 元素，它将承载循环进度条。接下来，我们创建四个 div 元素，分别代表四段循环进度条，它们分别拥有一个名为 md-progress-circle 的 CSS 类和一个独特的 md-progress-circleX 类（X 代表 1 到 4 的数字），其中 X 表示当前循环进度条的第几段。

CSS 样式

在 CSS 中，我们将利用伪类 :before 和 :after 来创建圆形，同时使用 animations 和 keyframes 来指定循环进度条的运动路径。我们还将使用变量 --md-progress-size 来指定循环进度条的大小，这将使我们更容易控制循环进度条的大小。下面是 CSS 代码：

-- -------------------- ---- -------
---------------------- -
    ------- ----------------------- ------
    ------ ----------------------- ------
    --------- ---------
    -------- -----
    ---------------- -------
    ------------ -------
-

------------------- -
    -------------- ----
    --------- ---------
    -------- ---
    ------- -----
    ------ -----
    ----------- -----------
    ------- --- ----- ------------
-

---------------------------- -------------------------- -
    ---- --
    ----- --
-

---------------------------- -------------------------- -
    ---- --
    ------ --
-

---------------------------- -------------------------- -
    ------- --
    ------ --
-

---------------------------- -------------------------- -
    ------- --
    ----- --
-

--------------------------- ------------------------- -
    --------- ---------
    -------- ---
    -------------- ----
    ----------- -----------
    ------- --- ----- ------------
    ---------- ----------- -- ----------------- -- ---- -- ---------
-

-------------------------- -
    ----------------- --------
    ------------------- --------
-

------------------------- -
    -------------------- --------
    ------------------ --------
-

---------- ----------- -
    -- -
        ---------- ----------
        ------------- ----
        -------- --
    -
    --- -
        ---------- ---------------
        ------------- ----
        -------- ----
    -
    ---- -
        ---------- ---------------
        ------------- ----
        -------- --
    -
-

如上所示，我们首先定义了 .md-progress-container 类，指定了容器的高度、宽度、位置和弹性盒子布局。接下来，我们定义 .md-progress-circle 类，指定了每个分段循环进度条的公共属性。我们还为每个分段循环进度条指定了用于伪类 :before 和 :after 的唯一 CSS 类，并使用位置和样式属性将它们移动到相应的位置。接下来，我们指定了伪类 :before 和 :after 的形状和样式，包括使用颜色变量为悬停分配颜色，使用动画名称为每个循环进度条指定动画，并使用 animation 属性指定动画的持续时间、缓动函数和循环方式。

我们还为动画定义了 @keyframes 属性，指定了在不同时间段内循环进度条的运动路径、边框宽度和不透明度。通过这个关键帧，我们已经确定了循环进度条的运动路径，即通过不断旋转 360 度，使图案连续不断地从上一个状态向下一个状态转换。

JavaScript 代码

在 JavaScript 中，我们将创建一个名为 mdProgress 的对象，用于控制循环进度条的属性，包括容器大小、循环速度等。我们还将为每个分段循环进度条添加动画类名，并使用 setTimeout 函数递归调用 setAnimation 方法，以更改循环进度条的动画。

-- -------------------- ---- -------
----- ---------- - -
    ----- -------
    ------ --
    ----- -----
  
    ----- ---------- -
        ----- ----------------- - -------------------------------------------------
        --------------------------------------------------------- -----------
  
        --------------------------------------------------------------- -- -
            ---------------------------------
        ---
  
        --------------------
    --
  
    ------------- ---------- -
        --- - - --
        ----------------------------------------------------- -- -
            --------------------------- - --- - ----- - ----------- - -- - ----
        ---
  
        -- ----------- -
            ------------- -- -
                --------------------
            -- ---------- - ------
        -
    -
--

------------------

如上述代码所示，我们首先定义了一个 mdProgress 的对象，包含 size、speed 和 loop 等属性。我们还定义了 init() 方法，它将使用 querySelector() 方法和容器的大小大小属性 --md-progress-size 来获取和设置容器的尺寸，并使用 classList.add() 方法向每个循环进度条添加一个 animated CSS 类，该类将调用动画。

接下来，我们定义 setAnimation() 方法，它使用 querySelectorAll() 方法和 forEach() 循环为每个动画圆圈计算动画延迟并将其分配给 animation-delay CSS 属性。在分配完所有动画延迟之后，我们使用递归调用 setTimeout() 方法，每个动画延迟结束后，来更新一次 setAnimation() 方法，从而实现循环进度条的动画效果。

示例代码

最后，以下是完整的示例代码，包括 HTML、CSS 和 JavaScript：

-- -------------------- ---- -------
---- ------------------------------
    ---- -------------------------- --------------------------
    ---- -------------------------- --------------------------
    ---- -------------------------- --------------------------
    ---- -------------------------- --------------------------
------

-------
    ---------------------- -
        ------- ----------------------- ------
        ------ ----------------------- ------
        --------- ---------
        -------- -----
        ---------------- -------
        ------------ -------
    -

    ------------------- -
        -------------- ----
        --------- ---------
        -------- ---
        ------- -----
        ------ -----
        ----------- -----------
        ------- --- ----- ------------
    -

    ---------------------------- -------------------------- -
        ---- --
        ----- --
    -

    ---------------------------- -------------------------- -
        ---- --
        ------ --
    -

    ---------------------------- -------------------------- -
        ------- --
        ------ --
    -

    ---------------------------- -------------------------- -
        ------- --
        ----- --
    -

    --------------------------- ------------------------- -
        --------- ---------
        -------- ---
        -------------- ----
        ----------- -----------
        ------- --- ----- ------------
        ---------- ----------- -- ----------------- -- ---- -- ---------
    -

    -------------------------- -
        ----------------- --------
        ------------------- --------
    -

    ------------------------- -
        -------------------- --------
        ------------------ --------
    -

    ---------- ----------- -
        -- -
            ---------- ----------
            ------------- ----
            -------- --
        -
        --- -
            ---------- ---------------
            ------------- ----
            -------- ----
        -
        ---- -
            ---------- ---------------
            ------------- ----
            -------- --
        -
    -
--------

--------
    ----- ---------- - -
        ----- -------
        ------ --
        ----- -----

        ----- ---------- -
            ----- ----------------- - -------------------------------------------------
            --------------------------------------------------------- -----------

            --------------------------------------------------------------- -- -
                ---------------------------------
            ---

            --------------------
        --

        ------------- ---------- -
            --- - - --
            ----------------------------------------------------- -- -
                --------------------------- - --- - ----- - ----------- - -- - ----
            ---

            -- ----------- -
                ------------- -- -
                    --------------------
                -- ---------- - ------
            -
        -
    --

    ------------------
---------

总结

在本文中，我们详细探讨了实现 Material Design 风格的循环进度条的方法，并包含了示例代码。通过这篇文章，读者可以学习如何通过使用 HTML、CSS 和 JavaScript 来创建现代的、功能性强大的循环进度条。最终，读者将拥有必要的技能和知识，在开发现代 Web 应用程序时应用 Material Design 风格的循环进度条，并提高用户体验。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/649856c348841e98945608e0

Feed
back

程序员教程

精选优质教程，助你快速提升技术实力

程序员面试题库

海量优质面试题，助你轻松应对技术面试
相关推荐
精选内容