Question

是否可以使用Twitter Bootstrap（v2或v3）使用某些内置功能或第三方插件呈现不确定的进度条？我试图谷歌，但没有运气。

我想要实现的例子：

progress bar

Answer 1

<div class="progress progress-striped active">
  <div class="bar" style="width: 100%;"></div>
</div>

在bootstrap 3中：

<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
  </div>
</div>

在bootstrap 4中：

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>

Answer 2

以下是我要做的事情，以获得一个不确定的进度条：

使用条纹动画进度条
将其设为100％
自定义动画速度
添加“请稍候”等文字，告知用户正在处理的内容
使用...内容属性

css

使用CSS in browsers that support this

演示：

.progress {
    margin: 15px;
}

.progress .progress-bar.active {
    font-weight: 700;
    animation: progress-bar-stripes .5s linear infinite;
}

.dotdotdot:after {
    font-weight: 300;
    content: '...';
    display: inline-block;
    width: 20px;
    text-align: left;
    animation: dotdotdot 1.5s linear infinite;
}

@keyframes dotdotdot {
  0%   { content: '...'; }
  25% { content: ''; }
  50% { content: '.'; }
  75% { content: '..'; }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    <span>Please wait<span class="dotdotdot"></span></span>
  </div>
</div>

（另见this Fiddle）

Answer 3

如果您想要一个仅限CSS的解决方案，请转到：

HTML：

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped indeterminate">
</div>

CSS：

.progress-bar.indeterminate {
  position: relative;
  animation: progress-indeterminate 3s linear infinite;
}

@keyframes progress-indeterminate {
   from { left: -25%; width: 25%; }
   to { left: 100%; width: 25%;}
}

这是一个有效的版本：

https://jsbin.com/dewikogujo/edit?html,css,output

Answer 4

老话题..但我今天必须这样做。这就是我所做的。

首先，我使用了Bootstrap对话框类here。

HTML片段

<div id="progressDiv" class="progress">
    <div class="progress-bar progress-bar-striped active" 
        role="progressbar" 
        aria-valuenow="100" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width: 100%">
    </div>
</div>

的JavaScript

var progress = $("#progressDiv").html();

BootstrapDialog.show(
{
    title: "Please wait...",
    message: progress
});

生成的对话框为:(请注意，进度条已设置动画）

这会弹出一个显示动画条的模态对话框。

Answer 5

我对100％的动画条纹进度条感到不满意，所以我写了一些CSS。只需将类jkoop-progress-bar-indeterminate添加到您的<div class="progress-bar ...中即可。就是这样。

经过Bootstrap v4.5测试

.progress .jkoop-progress-bar-indeterminate.progress-bar-animated {
  animation: indeterminate 1s linear infinite alternate, progress-bar-stripes 1s linear infinite;
  width: 25% !important;
}

.progress .jkoop-progress-bar-indeterminate {
  animation: indeterminate 1s linear infinite alternate;
  width: 25% !important;
}

@keyframes indeterminate {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 75%;
  }
}

<html>

<head>
  <title>Indeterminate Progress Bar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
</head>

<body style="margin: 20px;">
  <h1>Indeterminate Progress Bar</h1>

  <div class="progress">
    <div class="jkoop-progress-bar-indeterminate progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>

  <p style="color:#888;text-align:right">Bootstrap v4.5.2</p>
</body>

</html>

Answer 6

它不漂亮，但它完成了工作：

HTML：

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped active" style="position: relative; left: -180px; width: 180px">
</div>

使用Javascript：

setInterval(function() {
    var progress_width = $('.progress').width();
    var $progress_bar = $('.progress-bar');

    $progress_bar.css('left', '+=3');

    var progress_bar_left = parseFloat($progress_bar.css('left')+'');
    if (progress_bar_left >= progress_width)
        $progress_bar.css('left', '-200px');
}, 20);

随意优化你的jQuery选择器; - ）

这是一个有效的版本：

https://jsbin.com/copejaludu/edit?html,js,output

是否有可能使用Twitter Bootstrap呈现不确定的进度条？

6 个答案:

演示：