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

Question

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

我要实现的示例:

Answer 1

在bootstrap 2中:

<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%
• 自定义动画速度
• 添加"请等待"之类的文本以通知用户正在处理某些内容
• ...使用csscontent属性添加省略号()
• 在支持此功能的浏览器中使用CSS为省略号设置动画

演示:

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

(另见小提琴)

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对话框类。

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

出现的对话框是：（请注意进度条是动画的）

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