如何创建进度条 - 简单加载程序 - 分步教程

超文本标记语言

对于 HTML，我们只需要一个进度条元素和一个进度条元素。

<div class="progress-bar">
    <div class="progress"></div>
</div>

CSS

对于 CSS，首先我们将设置进度条的样式。

我们将位置设置为相对，高度设置为 20 像素，宽度设置为 300 像素。

然后我们将边框设置为 2 像素的纯蓝色，半径为 15 像素。

最后，我们将溢出设置为隐藏。

.progress-bar {
   
    position: relative;
    height: 20px;
    width: 300px