使用HTML和CSS的进度栏

本文介绍了使用HTML和CSS的进度栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要创建一个进度条，如下图所示：

I want to create a progress bar like in the below image:

我不知道如何创建。

推荐答案

<div id="progressbar">
  <div></div>
</div>

#progressbar {
  background-color: black;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar > div {
   background-color: orange;
   width: 40%; /* Adjust with JavaScript */
   height: 20px;
   border-radius: 10px;
}

（编辑：更改语法高亮;更改为子选择器的后代）

( Changed Syntax highlight; changed descendant to child selector)

这篇关于使用HTML和CSS的进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！