如何使用 HTML 和 CSS 创建进度条

htmlcssweb developmentfront end technology更新于 2024/3/21 23:40:17

概述

进度条是任何 Web 应用程序的主要组件。进度指示某个项目或任务的完成情况。在本模块中，我们将使用 HTML 构建进度条，并通过 CSS 为其设置样式。我们还将为进度条提供进度动画。在本任务中，我们将使用 @keyframes 为进度条添加动画效果。使用动画样式属性，例如动画时长、名称、时间等。

算法

步骤 1 − 在文本编辑器中创建 HTML 样板。

步骤 2 − 创建父级 div 容器，并将类名定义为 barContainer。

步骤 3 − 现在创建当前父级 div 的另一个子级，并定义类名。

步骤 4 − 在进度条中创建一个继承的子级，该子级将被动画化。

步骤 5 − 使用页面 head 标签内的 link 标签将样式表链接到网页。

步骤 6 − 创建一个名为 style.css 的新文件并设置页面样式，使用 animation 属性在 progressBar 中创建动画。

步骤 7 − 创建进度条成功。

示例

在此示例中，我们将使用 HTML 和 CSS 创建一个简单的进度条。其中，index.html 是主页，它是页面的骨架。我们刚刚创建了组件的框架，所有动画和样式部分都在 style.css 部分完成。style.css 文件包含组件的样式和动画部分。

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>Progress Bar</title>
   <style>
      * {
         margin: 0;
      }
      .barContainer {
         min-height: 100vh;
         width: 100vw;
         display: flex;
         align-items: center;
      }
      .progress,.progressBar {
         width: 20rem;
         height: 2rem;
         border-radius: 1.2rem;
         margin: auto;
         background-color: rgb(243, 243, 243);
      }
      .progressBar{
         background-color: green;
         animation: backp 3s;
         margin: 0;
         padding: 0;
         width: 80%;
         height: 2rem;
         border-radius: 1rem;
         box-shadow: none;
      }
      span{
         color: white;
         text-align: end;
         display: block;
         padding: 0.5rem;
      }
      @keyframes backp {
         0% {
            width: 0%;
         }
         100%{
            width: 80%;
         }
      }  
   </style>   
</head>
<body>
   <div class="barContainer">
      <div class="progress">
         <div class="progressBar">
            <span> 80% Completed</span>
         </div>
      </div>
   </div>
</body>
</html>

下图显示了输出结果，其中显示了一个进度条，该进度条会在页面加载时加载，因为我们只使用了 CSS，所以进度条固定在 80% 的进度。因此，创建此进度条是为了演示包含课程完成等任务的应用程序。因此，为了跟踪任务的完成情况，这是以图形用户界面形式呈现任务的完美方式。

结论

进度条用于许多应用程序，例如安装更新、下载任何应用程序、加载应用程序等等。进度条使用户界面更具吸引力。要实时运行进度条，仅使用 HTML 和 CSS 是无法实现的，因此为了在实时项目中实现进度条，我们还使用了 JavaScript(一种脚本语言)，它可以检查互联网连接以及网络的上传和下载情况，从而我们可以控制进度条的进度。使用 HTML 和 CSS 只能创建静态进度条。所以一般来说，使用 javascript 之类的脚本语言来制作进度条是比较好的。