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

Is it possible to render indeterminate progress bar with Twitter Bootstrap?

提问by Max Romanovsky

Is it possible to render indeterminate progress bar with Twitter Bootstrap (either v2 or v3) using either some build-in functionality or 3rd party plugin? I trued to google for it, but with no luck.

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

Example of I want to achieve:

我想实现的示例：

采纳答案by Cody

In bootstrap 2:

在引导程序 2 中：

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

In bootstrap 3:

在引导程序 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>

In bootstrap 4:

在引导程序 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>

回答by John Slegers

Here's what I would do to get an indeterminate progress bar :

这是我将如何获得不确定的进度条：

• Use a striped, animated progress bar
• Set it at 100%
• Customize the animation speed
• Add a text like "please wait" to inform the user that something is being processed
• Add ellipses (...), using the csscontent property
• Animate the ellipses using CSS in browsers that support this

• 使用条纹动画进度条
• 将其设置为 100%
• 自定义动画速度
• 添加诸如“请稍候”之类的文本以通知用户正在处理某些内容
• 添加省略号 ( ...)，使用csscontent 属性
• 在支持此功能的浏览器中使用 CSS 为椭圆设置动画

---

---

Demo :

演示：

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

(see also this Fiddle)

（另见这个小提琴）

回答by Dave

If you want a CSS-only solution, here ya go:

如果您想要仅使用 CSS 的解决方案，请执行以下操作：

HTML:

HTML：

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

CSS:

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

Here's a working version:

这是一个工作版本：

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

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

回答by James

Old topic.. but I had to do this today. Here's what I did.

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

First, I used the Bootstrap dialog class as found here.

首先，我使用了此处找到的 Bootstrap 对话框类。

HTML fragment

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

JavaScript

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

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

The resulting dialog is: (Note that the progress bar is animated)

结果对话框是：（注意进度条是动画的）

This pops up up a modal dialog showing an animated bar.

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

回答by Dave

It's not pretty, but it gets the job done:

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

HTML:

HTML：

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

Javascript:

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

Feel free to optimize your jQuery selectors a bit ;-)

随意优化您的 jQuery 选择器；-)

Here's a working version:

这是一个工作版本：

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

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