Docs: progress bars' animation now needs to be manually toggled

Refs #14409

diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html
index adf686853d003ebde0fe5b46982d3e5b5fbb4514..43b6412620e983cfe0c73c56f7df696be50d7e43 100644 (file)
--- a/docs/_includes/components/progress-bars.html
+++ b/docs/_includes/components/progress-bars.html
@@ -168,12 +168,13 @@
   <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
   <div class="bs-example">
     <div class="progress">
-      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
+      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
     </div>
+    <button type="button" class="btn btn-default bs-docs-activate-aniamted-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle animation</button>
   </div>
 {% highlight html %}
 <div class="progress">
-  <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
+  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
     <span class="sr-only">45% Complete</span>
   </div>
 </div>

diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index 9cd8ea24d3019824d155bfe2d0b6f1cd40a1ceca..a547fe20c3e45cbcd3ac42cc304fed41a2320058 100644 (file)
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@@ -101,7 +101,7 @@
     $('.bs-docs-popover').popover()
 
     // Button state demo
-    $('#loading-example-btn').click(function () {
+    $('#loading-example-btn').on('click', function () {
       var btn = $(this)
       btn.button('loading')
       setTimeout(function () {
@@ -109,6 +109,10 @@
       }, 3000)
     })
 
+    // Activate animated progress bar
+    $('.bs-docs-activate-aniamted-progressbar').on('click', function () {
+      $(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
+    })
 
     // Config ZeroClipboard
     ZeroClipboard.config({