是否可以使用 Twitter Bootstrap 呈现不确定的进度条？答案

【问题标题】：Is it possible to render indeterminate progress bar with Twitter Bootstrap?是否可以使用 Twitter Bootstrap 呈现不确定的进度条？
【发布时间】：2013-11-14 22:47:54
【问题描述】：

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

我想实现的例子：

【问题讨论】：

Indeterminate progress bar in HTML+CSS的可能重复

标签： css twitter-bootstrap twitter-bootstrap-3 css-selectors twitter-bootstrap-2

【解决方案1】：

在bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress progress-striped active">
  <div class="bar" style="width: 100%;"></div>
</div>

在bootstrap 3:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<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:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<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>

【讨论】：

虽然是一个旧答案，但这是在谷歌搜索时的最佳结果，这并不能回答问题。答案提供了一个正常的进度条，而问题要求提供一个不确定的进度条。不确定的进度条没有要显示的已知进度：en.wikipedia.org/wiki/Progress_bar
您是否费心尝试我提供的代码？ jsfiddle.net/CodyRank/pJ476 这几乎是一个不确定进度条的教科书示例。另见：goo.gl/iZRSzZ
我会收回反对票 - 我想只要它没有从 100% 移动，它看起来就足够接近了。我期待着更多类似于移动条的东西，它不仅仅是一个 100% 的动画，但看起来 mac indeterminate 就是这样。窗户往往是移动部分。很抱歉一直怀疑你！
这些都不适合我。第一个 sn-p 给了我一个空的进度条，第二个给了我一个完整的进度条......两者都没有动画
不是真的......一个新问题会更合适，但我最终得到了它的工作，所以没有压力

【解决方案2】：

如果你想要一个纯 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

【讨论】：

在我看来这是最好的答案，因为它模拟了传统的 Windows“选框”栏。只需对 HTML 进行少量更改，它也可以与 Bootstrap 3 一起使用：<div class="progress progress-striped"> <div class="progress-bar indeterminate" role="progressbar" style="width: 100%"></div> </div>
这应该是公认的答案，因为它可以使用 Bootstrap 进度条开箱即用。此外，动画可以替换为任何人都想要的更复杂的动画。
你是个传奇！

【解决方案3】：

这是我要获得不确定的进度条的方法：

使用条纹动画进度条
将其设置为 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）

【讨论】：

这个答案结合 Bootbox.js (bootboxjs.com) 最终对我有用。吨/年！
我在 blockUI 中使用了这个答案，效果很好
如何根据提交一些处理来渲染这个，处理完成后将其移除？
@tale852150 ：您只需要在处理的几个步骤中设置进度条的宽度。有关基本演示，请参阅 Bootstrap progress bar progression。
@JohnSlegers 感谢您的反馈。但这是一个不确定的进度条。当我的处理完成时，我需要它停止并显示“处理完成”（或完全消失）。本身没有进展。或者，也许我只是误解了您的反馈。 :-)

【解决方案4】：

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

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

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
});

生成的对话框是：（注意进度条是动画的）

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：