CODEWITHSUNDEEP
javascriptjqueryhtml
Mike
Mike

Reputation: 1768

Make a universal loading icon for buttons?

I'm trying to create some type of "universal" loading indicator that'll appear next to a button that's clicked. For example; I have a page that has two buttons, one for a contact form and the other for a subscription form. My first thought was to create a custom div next to each button via jQuery. But, I'm trying to avoid erroneous div's on my page.

The code I'm trying to use makes the loading indicator appear inside the button rather than outside. Here's the code with a link to JSFiddle:

JSFIDDLE LINK

CSS

#contact, #subscribe {
    margin:50px;
    width:100px;
    height:25px;
}
.indicator {
    position:relative;
    float:right;
    top:-23px;
    right:-25px;
    width:16px;
    height:16px;background:url(../graphics/loader.gif) no-repeat;
}

jQuery

$('#contact-submit').click(function()
{   
    $(this).addClass('indicator');
});
$('#subscribe-submit').click(function()
{   
    $(this).addClass('indicator');
});

HTML

<div id="contact">
    <button id="contact-submit">Contact</button>                                            
</div>  
<div id="subscribe">
    <button id="subscribe-submit">Subscribe</button>                                            
</div>

Upvotes: 1

Views: 275

Answers (2)

dfsq
dfsq

Reputation: 193291

Maybe you can make use of pseudo-element :after? Example:

.indicator {
    position: relative;
}
.indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background:url(http://www.graphicsoptimization.com/blog/wp-includes/images/go_examples/2008_05/indicator.gif) no-repeat;
}

http://jsfiddle.net/FHmqF/3/

Disclaimer: This approach will not work on <input type="button"> buttons as these elements can't have inner content.

Upvotes: 2

optimisticupdate
optimisticupdate

Reputation: 1689

Like Mike already pointed out you're attaching the class to the button itself, try something like this and play around with the css, or tell me where exactly you want to have your indicator. 

$('#contact-submit').click(function()
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});
$('#subscribe-submit').click(function() 
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});

http://jsfiddle.net/Ls3LW/

Upvotes: 0

Related Questions