W3.CSS Progress Bars (进度条)

2020-12-01 14:10 更新

基本进度条

普通的 <div> 元素可用于进度条。

CSS width 属性可用于设置进度条的高度和宽度。

实例

<div class="w3-border">
  <div class="w3-grey" style="height:24px;width:20%"></div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

进度栏宽度

使用 CSS width 属性更改进度栏的宽度(从 0 到 100%):




实例

<div class="w3-light-grey">
  <div class="w3-grey" style="height:24px;width:50%"></div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

进度条颜色

使用 w3-color 类更改进度条的颜色:




实例

<div class="w3-light-grey">
  <div class="w3-blue" style="width:75%"></div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

进度条标签

在 w3-container 元素内添加文本,以将标签添加到进度条。

使用 w3-center 类将标签居中。如果省略,它将保持对齐。

25%

50%

75%

实例

<div class="w3-light-grey">
  <div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

进度条文字大小

使用 w3-size 类更改容器中的文本大小:

50%

50%

50%

实例

<div class="w3-light-grey w3-xlarge">
  <div class="w3-container w3-green" style="width:50%">50%</div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

进度条填充

使用 w3-padding 类将填充添加到容器中:

25%

25%

25%

实例

<div class="w3-light-grey">
  <div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
  </div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

圆角进度条

使用 w3-round 类将圆角添加到进度条:

25%

25%

25%

实例

<div class="w3-light-grey w3-round">
  <div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

动态进度条

使用 JavaScript 创建动态进度条:

实例

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}
</script>

尝试一下 »
点击“尝试一下”按钮查看在线实例

带标签的动态进度栏

居中标签:

实例

<script>

function move() {

  var elem = document.getElementById("myBar");   

  var width = 20;

  var id = setInterval(frame, 10);

  function frame() {

    if (width >= 100) {

      clearInterval(id);

    } else {

      width++; 

      elem.style.width = width + '%'; 

      elem.innerHTML = width * 1  + '%';

    }

  }

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例

左对齐标签:

实例

<script>

function move() {

  var elem = document.getElementById("myBar");   

  var width = 20;

  var id = setInterval(frame, 10);

  function frame() {

    if (width >= 100) {

      clearInterval(id);

    } else {

      width++; 

      elem.style.width = width + '%'; 

      elem.innerHTML = width * 1  + '%';

    }

  }

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例

进度条外部的标签:

实例

<script>

function move() {

  var elem = document.getElementById("myBar");   

  var width = 20;

  var id = setInterval(frame, 10);

  function frame() {

    if (width >= 100) {

      clearInterval(id);

    } else {

      width++; 

      elem.style.width = width + '%'; 

      document.getElementById("demo").innerHTML = width * 1  + '%';

    }

  }

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例

另一个示例(高级):

实例

<script>

function move() {

  var elem = document.getElementById("myBar");   

  var width = 0;

  var id = setInterval(frame, 50);

  function frame() {

    if (width >= 100) {

      clearInterval(id);

      document.getElementById("myP").className = "w3-text-green w3-animate-opacity";

      document.getElementById("myP").innerHTML = "Successfully uploaded 10 photos!";

    } else {

      width++; 

      elem.style.width = width + '%'; 

      var num = width * 1 / 10;

      num = num.toFixed(0)

      document.getElementById("demo").innerHTML = num;

    }

  }

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号