代码之家 › 专栏 › 技术社区 › Daniel Williams

达到100%满时关闭引导进度条

progress twitter-bootstrap javascript

Daniel Williams · 技术社区 · 6 年前

我在做一件事 while 0 到 100

这是可行的,但我想隐藏进度栏,因为它达到100%满。我试过用 setTimeOut 没有成功。

即使 虽然 0-100的循环可以在一微秒内完成,棒仍然会逐渐填满。

var i = 0;
while(i <= 100){
  $('#progress').attr('aria-valuenow', i).css('width', i + '%');
  i++;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="progress">
  <div id="progress" class="progress-bar progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

1 回复 | 直到 6 年前

Daniel Williams 6 年前

全部完成。无引导程序使它更容易。

updateProgress(0);

function updateProgress(i) {
  setTimeout(function() {
    if (i <= 100) {
      $('#progress').width(i + '%'); 
      i++;
      updateProgress(i);
    } else {
     $('#progress').hide();
     $('#progress').width('1%');  
    }
  }, 4);
}

#progress {
  background-color: #007bff;
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="progress"></div>

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前