Using JQuery / JavaScript to turn a button into a progress bar

问题

I am trying to find out how to turn a button into a progress bar. For example, in a bootstrap button such as:

<button class="btn btn-large btn-primary" type="button">Load</button>

I am currently using a classic bootstrap progress bar and refreshing it via a JQuery setInterval:

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

Is it possible to turn the button into a progress bar - so the advancing progress fills the background of the actual button, rather than using a separate page element for the progress bar?

回答1:

I think it's a best practice to use 2 different elements so you can reset the form when you're done with it, however it can be done with a single div, but you'll still need to add a progress bar element to the button unless you have some other way of making the progress bar... progress.

When the button is clicked, remove colouring format, and add a blank progress bar. As the progress bar updates, it is made wider until it fills the button.

Here is a fiddle the get you started: http://jsfiddle.net/zRBxR/

css:

.progress,
.progress:hover {
    background: transparent;
    padding: 0;
    height: 30px;
    width: 68px;
}

#progress-bar {
    background: #000;
    display: block;
    height: 30px;
    width: 0;
}

html:

<html>
    <body>
        <div id="progress-button" class="btn btn-primary btn-default" onclick="startProgress();">Button</div>
    </body>
</html>

js:

var progress = 0;

function startProgress()
{

    // change button to progress button, and add progress bar
    $('#progress-button').addClass('progress').html('<span id="progress-bar"></span>');

    // update progress bar every 0.5 second
    setInterval(function(){
        $('#progress-bar').width(progress);
        progress++;
    }, 500);
}

回答2:

Yes, jQuery has a .replaceWith() method.

Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

Suppose you want to use the HTML5 progressbar you can write your code like this: HTML5

<button class="btn btn-large btn-primary" type="button">Load</button>

JS:

$('button').replaceWith('<progress max="100" value="60">\
        <strong>Progress: 60% done.</strong>\
    </progress>');

Fiddler: http://fiddle.jshell.net/KQr7S/

回答3:

You can hide the button onclick, and display the progress bar in the position of the button.

<button class="btn btn-large btn-primary" type="button" onClick="showProgress()">Load</button>

function showProgress(){
    $("button").fadeOut();
    $("#data_loaded").fadeIn();
  }

回答4:

Yes, I'd assume that's possible. Of course, with a button you cannot have an inner container filling up the parent one as you showed with the second example.

However, you can do this using - for example - the background property of the button. So if you custom-style your button and let the background position change according to the progress value, you should be able to get this working.

So basically, you want to start with the background of the button out of view on the left of the button, and then gradually move it to the right as you go along.

Another solution is to toggle between the button and the progress bar <div> you showed.

来源：https://stackoverflow.com/questions/15019381/using-jquery-javascript-to-turn-a-button-into-a-progress-bar

标签

jquery

html

css

button

progress-bar