부트스트랩 로딩바 - buteuseuteulaeb lodingba

I have one question: On my website, button "submit" starts loading a new page for a limited time (defined in simple form). That's work perfectly. I want to do so that when you click "start" bar appears and starts loading for defined time. I would like to use an animated loading boostrap:

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

How can I do that? Javascript? How? :(

Thanks in advance.

UiUx

9712 gold badges14 silver badges25 bronze badges

asked Jul 25, 2013 at 9:41

4

Total Data: data-percentage="60"

Total Second: data-second="60"

HTML

<div class="progress progress-striped active">
    <div class="bar" style="width: 0%;" data-percentage="60" data-second="20"></div>
</div>
<a id="clickme">Click</a>

JS

$('#clickme').click(function () {
    var me = $('.progress .bar');
    var perc = me.attr("data-percentage");
    var sec = me.attr("data-second") * 1000;
    var each = sec / perc;
    var current_perc = 0;

    me.css('width', '100%');
    me.text('Loading..');

    setTimeout(function () {    // Do something after 5 seconds
        var progress = setInterval(function () {
            if (current_perc >= perc) {
                clearInterval(progress);
            } else {
                current_perc += 1;
                me.css('width', (current_perc) + '%');
            }

            me.text((current_perc) + '%');

        }, each);
    }, 2000);
});

Demo: http://jsfiddle.net/byybora/XHKkU/4/

Loading Demo: http://jsfiddle.net/byybora/dbdAx/43/

answered Jul 25, 2013 at 10:34

BoraBora

10.3k5 gold badges44 silver badges72 bronze badges

0

Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process.

To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:

Example

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Try it Yourself »

Progress Bar Height

The height of the progress bar is 16px by default. Use the CSS height property to change it. Note that you must set the same height for the progress container and the progress bar:

Example

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Try it Yourself »

Progress Bar Labels

Add text inside the progress bar to show the visible percentage:

Example

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Try it Yourself »

Colored Progress Bars

By default, the progress bar is blue (primary). Use any of the Bootstrap 4 contextual background classes to change its color:

Example

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Try it Yourself »

Striped Progress Bars

Use the .progress-bar-striped class to add stripes to the progress bars:

Example

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Try it Yourself »

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Example

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Try it Yourself »

Multiple Progress Bars

Progress bars can also be stacked:

Free Space

Warning

Danger

Example

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

Try it Yourself »