Question

是否可以在没有Javascript的HTML / CSS中实现适合表格中单元格（带有文本的双色栏）的最小进度条？

不需要动态更新进度条。

Answer 1

您需要使用javascript在页面上实现动态行为（例如，如果您要更新进度条）

当然，你总是可以尝试在HEAD中使用META标签定期刷新整个页面，并更新服务器端的进度条，如下所示：

<meta http-equiv="refresh" content="15">

（我假设通过＆＃34;实施＆＃34;您的意思是获取进度条以显示当前进度）

编辑： HTML5包含一个新的http://apidock.com/rails/ActiveRecord/QueryMethods/order：

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

Answer 2

根据您的需要调整:(颜色，宽度）加载的百分比是内联样式。

<div class="progress-bar">
  <span class="progress" style="width: 20%;"></span>
  <span class="text">Loading...</span>
</div>

<style type="text/css">
.progress-bar{
  position: relative;
  width: 200px;
  height: 24px;
  background: #bdc3c7;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Arial";
}
.progress-bar .progress{
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #2ecc71;
}
.progress-bar .text{
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 24px;
  vertical-align: center;
  color: #2c3e50;
}
</style>

使用HTML / CSS实现最小进度条

2 个答案: