在现代网页应用程序中，带有进度条功能的按钮作为一种常见的用户体验技术，常常被用于处理复杂的任务或长时间的操作。Material Design 是一种由 Google 设计的现代 UI 设计风格，它强调美观和功能，同时也提供了一些简便的方式来实现带有进度条的按钮。本文将向您介绍 Material Design 中如何实现带有进度条的按钮，以及如何使用实现这种效果。
实现方法
实现带有进度条的按钮需要的一些基本元素是按钮本身以及进度条元素。这些元素可以使用 HTML 和 CSS 来创建，但这还不足以加入动画效果及相应的交互逻辑。幸运的是，Material Design 对此已经有了自己的标准模式以及 jQuery 插件来支持这种效果。
Material Design 中实现带有进度条的按钮，我们需要分两步进行。
步骤一：创建 Material Design 按钮
要创建 Material Design 风格的按钮，我们需要使用 Materialize CSS，它是一个使用 Material Design 的 CSS 框架。它提供了具有 Material Design 外观和感觉的按钮和其他元素。我们可以使用以下代码来创建带有 Materialize CSS 样式的按钮:
<a class="waves-effect waves-light btn">Button</a>
步骤二：使用 jQuery 插件添加进度条
为了为按钮添加进度条，我们需要使用一个 jQuery 插件-ButtonProgress，它实现了带有进度条的 Material Design 风格的按钮，在用户点击按钮时自动显示进度条，并在完成任务时自动隐藏。
首先，我们需要在我们的 HTML 中加载 ButtonProgress.js 插件:
<script src="ButtonProgress.js"></script>
然后，我们可以使用如下 jQuery 代码将进度条应用到我们的按钮中:
$(document).ready(function(){
$('a.btn').buttonProgress();
});现在，我们的按钮已经具备添加进度条的功能了。当用户点击按钮时，进度条会自动显示，并在完成任务后自动隐藏。
示例代码
下面是实现带有进度条的按钮的示例代码。请先下载 Materialize CSS，然后将 ButtonProgress.js 的文件链接到您的 HTML 中，以使示例代码正常运行。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------ ----------
----- ----------------
----- --------------- ---------------------------- --------------------
----- ---------------- ------------------------------------------------------------------------------------------
-------
------
---- ------------------
-- ------------------- ----------- ---------------
------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------------------
------- ---------------------------------
--------
-----------------------------
----------------------------
---
---------
-------
-------结论
现代网页应用程序需要带有进度条的按钮作为一种常见的用户体验技术，Material Design 是一种由 Google 设计的现代 UI 设计风格，它提供了一些简便的方式来实现带有进度条的按钮。本文向您介绍了如何使用 Material Design 和 jQuery 插件来创建带有进度条的按钮，以及如何使用实现这种效果。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67518b7a8bd460d3ad8a9d3b