在现代网页应用程序中，进度条是广泛使用的交互控件之一。ProgressBar 提供了一种可视化的方式来向用户显示正在进行的操作的进度。在 Material Design 中，旋转进度条 ProgressBar 成为了最流行的进度条类型。本文将详细介绍 Material Design 旋转进度条 ProgressBar，并提供示例代码和指导意义。
什么是 Material Design 旋转进度条 ProgressBar？
Material Design 旋转进度条 ProgressBar 是一种漂亮的圆形进度指示器，它通常用于向用户显示正在进行的操作的进度。旋转进度条使用动画来表示进度，并在用户等待时提供了幽默感和趣味性。
如何使用 Material Design 旋转进度条 ProgressBar？
在 HTML 中使用 Material Design 旋转进度条 ProgressBar，需要添加以下代码：
<div class="spinner"> <div class="dot1"></div> <div class="dot2"></div> </div>
在 CSS 中添加以下代码：
-- -------------------- ---- ------- -------- - ------- ----- ----- ------ ----- ------- ----- --------- --------- ----------- ------- ------------------ ------ ---- -------- ------- ---------- ------ ---- -------- ------- - ------ ----- - ------ ---- ------- ---- -------- ------------- --------- --------- ---- -- ----------------- ----- -------------- ----- ------------------ ------ ---- -------- ------------ ---------- ------ ---- -------- ------------ - ----- - ---- ----- ------- ---- ------------------------ ------ ---------------- ------ - ------------------ ------ - ---- - ------------------ --------------- ---------- --------------- - - ---------- ------ - ---- - ------------------ --------------- ---------- --------------- - - ------------------ ------ - --- ---- - ------------------ ---------- - --- - ------------------ ---------- - - ---------- ------ - --- ---- - ---------- ----------- ------------------ ----------- - --- - ---------- ----------- ------------------ ----------- - -展开代码
在 JavaScript 中，你可以使用 JavaScript 或 jQuery 修改旋转进度条的进度。例如，使用以下代码来控制进度：
-- -------------------- ---- ------- --- ----------- - ---------------------------------------- --- ------------- - -- ---------------------- - ------------- -- -- -- -------------- - ---- - ------------- - -- - ----------------------- - ------------- - ---- -- -----展开代码
Material Design 旋转进度条 ProgressBar 的指导意义
Material Design 旋转进度条 ProgressBar 提供了许多潜在的指导意义。首先，在进行长时间操作时，用户需要一个指示器，以便知道应用程序正在工作并且没有崩溃。ProgressBar 可以安抚用户的焦虑，使他们知道应用正在运行，而不是被卡住了。
其次，ProgressBar 的动画效果可以提高你的应用程序的趣味性和吸引力。通过使用旋转效果，用户可以感受到应用程序在工作，有趣的动画可以吸引用户的注意力。
最后，Material Design 旋转进度条 ProgressBar 是一种很好的用户体验，因为它告诉用户操作的状态，建立了对用户的信任和满意度。一般来说，只要你在你的应用程序中使用 ProgressBar，用户会对你的应用程序更加信任、满意、喜欢和使用。
结论
Material Design 旋转进度条 ProgressBar 是一种很好的用户体验，它不仅可以提高你的应用程序的趣味性和吸引力，还可以向用户提供操作状态的指示，建立对用户的信任和满意度。在你的下个应用程序中使用 ProgressBar，向你的用户展示你的应用程序正在积极地工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b07299babaf620fa6ff5c
