CODEWITHSUNDEEP
cssangularjsdirective
totothegreat
totothegreat

Reputation: 1643

Showing a loading bar inside a button when it's clicked

I have this simple thing to do in angularjs that require a bit of dom manipulation, and i think it suppose to be a directive of some kind but i have no idea how to approach it.

I have this simple button: (html)

      <button class="btn btn-success" style='margin-bottom:17px' style='margin-right:5px;' ng-show='pageToShow <  pages.length-1' ng-click='changePage("next")'>
         <span class="glyphicon glyphicon-arrow-right" style='margin-right:5px' aria-hidden="true"></span>Next 
      </button>

When i click it, i want inside of it, instead! of the glyphicon, a moving gif, like this:

enter image description here

1) How to remove the already existing img inside of the button and replace it? 2) I want to have other types of spinners, not the rounded one, how can i change the default spinner?

How can i do so?

Upvotes: 0

Views: 1303

Answers (2)

Johan van der Vleuten
Johan van der Vleuten

Reputation: 403

Check out this directive, it does exactly what you want:

(offine)

And a demo:

(offline)

You can change the classes of the button-prepend="" and spinner-icon="" to a css-class that defines your own spinners/gifs.

Upvotes: 2

j.wittwer
j.wittwer

Reputation: 9497

You can create your own loading gif with http://www.ajaxload.info. Then, use ng-show to determine if the gif or icon should be visible.

<button ng-click="loading = !loading;" class="btn btn-success">
  <img ng-show="loading" src='http://i.imgur.com/1HDbs9b.gif' />
  <span ng-show="!loading" class="glyphicon glyphicon-arrow-right"></span>
  Next
</button>

enter image description here

http://plnkr.co/edit/6N4x5bZyiilV2GMqCP48?p=preview

Upvotes: 1

Related Questions