HTML 和 CSS 进度条 [关闭]答案

【问题标题】：HTML and CSS progress bar [closed]HTML 和 CSS 进度条 [关闭]
【发布时间】：2015-07-30 07:47:59
【问题描述】：

我想创建一个如下图所示的进度条：

Progress Bar - Image

不知道如何创建它。

您能帮我创建这个进度条吗？

【问题讨论】：

Progress Bar with HTML and CSS的可能重复
可以使用 HTML5 <progress max="100" value="80"></progress>

标签： html css statusbar

【解决方案1】：

你可以使用 HTML5 progress 元素

HTML

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

CSS

progress {
    height: 16px;
    width: 400px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 24px;
    background: #fff;
    border: solid 2px #e5e5e5;
}
progress::-webkit-progress-bar {
    height: 16px;
    background: #37CC7D;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    height: 16px;
    background: #37CC7D;
    border-radius: 20px;
}
progress::-moz-progress-bar {
    height: 16px;
    background: #37CC7D;
    border-radius: 20px;
}

主要的现代浏览器将运行 progress 元素 - CANIUSE

DEMO HERE

【讨论】：

【解决方案2】：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

试试这个代码。这是我用于进度条的内容。

【讨论】：