javascript - adding a progress indicator inside a button - Stack Overflow

admin管理员组

文章数量:1289971

I have the following button:

/

and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so? The spinner is here.

Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click.

This is the simple button I have:

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>

I have the following button:

http://jsfiddle/TU6vQ/

and I wanted to add a loading spinner next to the 'Invite your friends' text. How do I do so? The spinner is here.

Is this spinner going to be a div inside a button? Or what is the easiest way to do so? I also wanted to show the spinner on a button click.

This is the simple button I have:

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 4, 2013 at 14:58 aherlambangaherlambang 14.4k5454 gold badges153153 silver badges255255 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

If you make the button relatively positioned, you can absolutely position the spinner inside of the button:

http://jsfiddle/TU6vQ/8/

HTML:

<button id="inviteYourFriends" class="arvo-bold button blue" style='position:relative'>
     <img src="http://www.gifstache./images/ajax_loader.gif" class='spinner'/>
            Invite your friends
</button>

CSS:

.spinner { 
    position: absolute; 
    right: 5px; 
    top: 6px; 
    width: 25px; 
    height: 25px;
    display: none;
}

JS:

$('button#inviteYourFriends').click(function() {$('.spinner').show();});

Put spinner inside of button, give it absolute positioning, and relative on the button. The button is a block level element, you don't need an additional div around it all.

I updated the jsfiddle here:

<div style='position:relative'>
    <img src='http://www.gifstache./images/ajax_loader.gif' style='position:absolute; width:16px; margin:10px 10px; height:16px;' />
<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        </button>
</div>

The button tag can support img tags like almost any other element, and so all you need to do is put the image inside it; as simple as it sounds.

 <button id="inviteYourFriends" class="arvo-bold button blue" >
            <img src="http://www.gifstache./images/ajax_loader.gif" height=10> Invite your friends
        </button>

On your button click just prepend your button contents with the image. Voila.

i would add the image inside the button element, then position and size it using css. here is the jfiddle: http://jsfiddle/TU6vQ/9/

here's the code:

<button id="inviteYourFriends" class="arvo-bold button blue" >
            Invite your friends
        <img src="http://www.gifstache./images/ajax_loader.gif" alt="..." class="spinner"/>
        </button>

CSS:

.button {
    line-height: 52px;
    font-size: 16px;
    width: 270px;
    height: 50px;

     text-shadow: -1px -1px 1px rgba(175,175,175,.42);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 38px;
    color: #fefefe;
    font-size: 14px;
    display: block;
    height: 38px;
    border: 0;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.1); 
       -moz-box-shadow: 1px 2px 2px rgba(0,0,0,.1);
            box-shadow: 1px 2px 2px rgba(0,0,0,.1);
}

.button.blue {
    background: rgb(169,191,200);
    background: -moz-linear-gradient(top,  rgba(169,191,200,1) 0%, rgba(169,191,200,1) 51%, rgba(143,170,182,1) 54%, rgba(143,170,182,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,191,200,1)), color-stop(51%,rgba(169,191,200,1)), color-stop(54%,rgba(143,170,182,1)), color-stop(100%,rgba(143,170,182,1)));
    background: -webkit-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: -o-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: -ms-linear-gradient(top,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
    background: linear-gradient(to bottom,  rgba(169,191,200,1) 0%,rgba(169,191,200,1) 51%,rgba(143,170,182,1) 54%,rgba(143,170,182,1) 100%);
}

.spinner
{  
    margin-top:8px;
    margin-left:5px;
    height:20px;
    width:20px;
    position:absolute;
}

本文标签： javascriptadding a progress indicator inside a buttonStack Overflow