HTML CSS 进度条

在HTML和CSS中，创建一个进度条可以通过使用HTML的<progress>元素或者通过CSS自定义样式的<div>元素来实现。以下是两种方法的示例代码：

方法一：使用HTML的<progress>元素




<progress value="50" max="100">50%</progress>

方法二：使用CSS自定义样式的<div>元素




<div class="progress-bar" style="width: 50%;">50%</div>

CSS样式：




.progress-bar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
  transition: width 0.5s;
}

你可以通过调整width的百分比来改变进度条的进度，并且可以通过CSS中的transition属性为进度条的变化添加动画效果。

HTML CSS 进度条

评论已关闭

推荐阅读