带有百分比值的基本进度条 - Html

HTML中的基本进度条是展示进程的一种有效工具。它可以显示一个任务或过程的进程百分比，并且通常是在固定的时间按照一定的步骤完成的。在本篇文章中，我们将介绍如何创建和使用带有百分比值的基本进度条，让用户知道正在进行的进度。

创建基本进度条

在 HTML 中，创建进度条很简单。我们使用<progress>元素，并设置它的属性value和max。value属性代表任务完成的百分比，max属性代表任务的总进程，通常都会设置为100。

下面是HTML代码片段:

<progress value="20" max="100"></progress>

这里，我们设置进度条的值为20，总进程为100。在浏览器中打开这段代码，我们会看到一个20％的进度条。

更多进度

当我们创建多个任务时，我们当然希望为每个任务创建一个进度条，那该如何实现呢？

我们可以将每个进度条用一个<div>元素包含起来，并且设置不同的ID。然后在每个进度条的<progress>元素中设值，因此，我们可以分别设置不同任务的完成百分比。

下面是样例代码片段：

<div id="task1">
    <p>Task 1 </p>
    <progress value="25" max="100"></progress>
</div>

<div id="task2">
    <p>Task 2</p>
    <progress value="10" max="100"></progress>
</div>

在这个例子中，我们创建了两个具有不同 ID 的<div>元素，每个<div>元素包含了一个<p>元素和一个<progress>元素，每个进程的完成百分比也不相同。

设置特定样式和视觉层面

在上述代码中，我们只是简单地输出了进度条。如果我们想要在显示上进行自定义，我们需要应用一些 CSS 样式。例如，使用CSS渐变在进程结束时，可以使进度更加美观。

下面是样例代码片段：

<style>
    progress {
        width: 100%;
        height: 20px;
    }

    progress[value]::-webkit-progress-bar {
        background-color: #eee;
        border-radius: 2px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    progress::-webkit-progress-value {
        background-image:
            -webkit-linear-gradient(-45deg,
                transparent 50%, rgba(0, 0, 0, .1) 50%,
                rgba(0, 0, 0, .1) 100%);
    }
</style>

<div id="task1">
    <p>Task 1 </p>
    <progress value="25" max="100"></progress>
</div>

<div id="task2">
    <p>Task 2</p>
    <progress value="10" max="100"></progress>
</div>

在上述代码中，我们设置了外面的<style>元素，以定义 progress的样式。首先，我们设置progress的高度和宽度为20px和100％。接下来，我们为进度条条设置了一个浅色的背景，以及某些圆角和阴影来美化。

最后，我们使用CSS渐变，使进程结束时更加美观。

结论

在本篇文章中，我们介绍了如何使用 HTML 的<progress>元素来创建带有百分比值的基本进度条，以及如何为进度条应用不同的样式和外观。无论你是作为前端需要在你的网站或应用程序中展示进度条，或者是作为后端程序员需要为你的前端提供功能，HTML 进度条是必不可少的部分。