How to add a spinner icon to button when it s in the Loading state

Question

Twitter Bootstrap s buttons have a nice Loading    state available   The thing is that it just shows a message like Loading    passed through the data-loading-text attribute like this    lt button type  button  class  btn btn-primary start  id  btnStartUploads          data-loading-text   Localization Uploading  gt       lt i class  icon-upload icon-large  gt  lt  i gt       lt span gt  Localization StartUpload lt  span gt   lt  button gt    Looking at Font Awesome  you see that there s now an animated spinner icon   I tried to integrate that spinner icon when firing an Upload operation like this       btnStartUploads   button  loading        btnStartUploads i   removeAttr  class        btnStartUploads i   addClass  icon-spinner icon-spin icon-large      but this had no effect at all  that is  I just see the Uploading    text on the button   Is it possible to add an icon when the button is in the Loading state  Looks like somehow Bootstrap just removes the icon  lt i class  icon-upload icon-large  gt  lt  i gt  inside the button while in the Loading state     Here s a simple demo that shows the behavior I describe above  As you see when it enters the Loading state the icon just disappears  It reappears right after the time interval

User · Accepted Answer

If you look at the bootstrap-button js source  you ll see that the bootstrap plugin replaces the buttons inner html with whatever is in data-loading-text when calling   myElem  button  loading     For your case  I think you should just be able to do this    lt button type  button          class  btn btn-primary start          id  btnStartUploads          data-loading-text   lt i class  icon-spinner icon-spin icon-large  gt  lt  i gt   Localization Uploading  gt       lt i class  icon-upload icon-large  gt  lt  i gt       lt span gt  Localization StartUpload lt  span gt   lt  button gt

User · Answer

Here is a full-fledged css solution inspired by Bulma  Just add       button         display  inline-flex        align-items  center        justify-content  center        position  relative        min-width  200px        max-width  100         min-height  40px        text-align  center        cursor  pointer              -webkit-keyframes spinAround         from           -webkit-transform  rotate 0deg           transform  rotate 0deg                 to           -webkit-transform  rotate 359deg           transform  rotate 359deg                      keyframes spinAround         from           -webkit-transform  rotate 0deg           transform  rotate 0deg                 to           -webkit-transform  rotate 359deg           transform  rotate 359deg                       button is-loading         text-indent  -9999px        box-shadow  none        font-size  1rem        height  2 25em        line-height  1 5        vertical-align  top        padding-bottom  calc 0 375em - 1px         padding-left  0 75em        padding-right  0 75em        padding-top  calc 0 375em - 1px         white-space  nowrap              button is-loading  after          -webkit-animation  spinAround 500ms infinite linear        animation  spinAround 500ms infinite linear        border  2px solid  dbdbdb        border-radius  290486px        border-right-color  transparent        border-top-color  transparent        content            display  block        height  1em        position  relative        width  1em

User · Answer

A lazy way to do this is with the UTF-8 entity code for a half circle  25E0  aka  amp  x25e0    which looks like   and then keyframe animate it  It s a simple as   x000D   x000D   busy   animation  spin 1s infinite linear  display inline-block  font-weight  bold  font-family  sans-serif  font-size  35px  font-style normal  color  555      busy  before   content   25E0       keyframes spin   0   transform  rotate 0deg    100   transform  rotate 359deg      x000D   lt i class  busy  gt  lt  i gt  x000D   x000D   x000D

User · Answer

Here s my solution for Bootstrap 4    lt button id  search  class  btn btn-primary   data-loading-text   lt i class  fa fa-spinner fa-spin fa-fw  aria-hidden  true  gt  lt  i gt Searching  gt    Search  lt  button gt   var setLoading   function        var search       search      if   search data  normal-text          search data  normal-text   search html           search html search data  loading-text         var clearLoading   function        var search       search      search html search data  normal-text         setInterval      gt      setLoading      setTimeout      gt        clearLoading         1000      2000     Check it out on JSFiddle

User · Answer

Simple solution for Bootstrap 3 using CSS3 animations   Put the following in your CSS    glyphicon spinning       animation  spin 1s infinite linear      -webkit-animation  spin2 1s infinite linear      keyframes spin       from   transform  scale 1  rotate 0deg         to   transform  scale 1  rotate 360deg         -webkit-keyframes spin2       from   -webkit-transform  rotate 0deg         to   -webkit-transform  rotate 360deg         Then just add the spinning class to a glyphicon while loading to get your spinning icon    lt button class  btn btn-lg btn-warning  gt       lt span class  glyphicon glyphicon-refresh spinning  gt  lt  span gt  Loading         lt  button gt    Based on http   www bootply com 128062    Note  IE9 and below do not support CSS3 animations

User · Answer

These are mine  based on pure SVG and CSS animations  Don t pay attention to JS code in the snippet bellow  it s just for demoing purposes  Feel free to make your custom ones basing on mine  it s super easy    x000D   x000D  var svg   d3 select  svg    x000D      columnsCount   3  x000D   x000D    basic    basic2    basic3    basic4    loading    loading2    spin    chrome    chrome2    flower    flower2    backstreet boys   forEach function animation  i   x000D    var x    i columnsCount 1    200-100  x000D        y   20    Math floor i columnsCount    200   x000D     x000D     x000D    svg append  text   x000D       attr  text-anchor    middle   x000D       attr  x   x  x000D       attr  y   y  x000D       text  i 1       animation   x000D     x000D    svg append  circle   x000D       attr  class   animation  x000D       attr  cx    x  x000D       attr  cy    y 40  x000D       attr  r    16  x000D      x000D  circle   x000D    fill  none  x000D    stroke   bbb  x000D    stroke-width  4 x000D    x000D   x000D   basic   x000D    animation  basic 0 5s linear infinite  x000D    stroke-dasharray  20 80  x000D    x000D   x000D   keyframes basic   x000D    0      stroke-dashoffset  100   x000D    100    stroke-dashoffset  0   x000D    x000D   x000D   basic2   x000D    animation  basic2 0 5s linear infinite  x000D    stroke-dasharray  80 20  x000D    x000D   x000D   keyframes basic2   x000D    0      stroke-dashoffset  100   x000D    100    stroke-dashoffset  0   x000D    x000D   x000D   basic3   x000D    animation  basic3 0 5s linear infinite  x000D    stroke-dasharray  20 30  x000D    x000D   x000D   keyframes basic3   x000D    0      stroke-dashoffset  100   x000D    100    stroke-dashoffset  0   x000D    x000D   x000D   basic4   x000D    animation  basic4 0 5s linear infinite  x000D    stroke-dasharray  10 23 3  x000D    x000D   x000D   keyframes basic4   x000D    0      stroke-dashoffset  100   x000D    100    stroke-dashoffset  0   x000D    x000D   x000D   loading   x000D    animation  loading 1s linear infinite  x000D    stroke-dashoffset  25  x000D    x000D   x000D   keyframes loading   x000D    0      stroke-dashoffset  0     stroke-dasharray  50 0    x000D    50     stroke-dashoffset  -100  stroke-dasharray  0 50   x000D    100     stroke-dashoffset  -200 stroke-dasharray  50 0   x000D    x000D   x000D   loading2   x000D    animation  loading2 1s linear infinite  x000D    x000D   x000D   keyframes loading2   x000D    0   stroke-dasharray  5 28 3    stroke-dashoffset  75   x000D    50   stroke-dasharray  45 5     stroke-dashoffset  -50   x000D    100   stroke-dasharray  5 28 3  stroke-dashoffset  -125    x000D    x000D   x000D   spin   x000D    animation  spin 1s linear infinite  x000D    stroke-dashoffset  25  x000D    x000D   x000D   keyframes spin   x000D    0      stroke-dashoffset  0     stroke-dasharray  33 3 0    x000D    50     stroke-dashoffset  -100  stroke-dasharray  0 33 3   x000D    100     stroke-dashoffset  -200 stroke-dasharray  33 3 0   x000D    x000D   x000D   chrome   x000D    animation  chrome 2s linear infinite  x000D    x000D   x000D   keyframes chrome   x000D    0      stroke-dasharray  0 100  stroke-dashoffset  25   x000D    25     stroke-dasharray  75 25  stroke-dashoffset  0   x000D    50     stroke-dasharray  0 100   stroke-dashoffset  -125   x000D    75      stroke-dasharray  75 25  stroke-dashoffset  -150   x000D    100     stroke-dasharray  0 100  stroke-dashoffset  -275   x000D    x000D   x000D   chrome2   x000D    animation  chrome2 1s linear infinite  x000D    x000D   x000D   keyframes chrome2   x000D    0      stroke-dasharray  0 100  stroke-dashoffset  25   x000D    25     stroke-dasharray  50 50  stroke-dashoffset  0   x000D    50     stroke-dasharray  0 100   stroke-dashoffset  -50   x000D    75     stroke-dasharray  50 50   stroke-dashoffset  -125   x000D    100    stroke-dasharray  0 100   stroke-dashoffset  -175   x000D    x000D   x000D   flower   x000D    animation  flower 1s linear infinite  x000D    x000D   x000D   keyframes flower   x000D    0      stroke-dasharray  0  20  stroke-dashoffset  25   x000D    50     stroke-dasharray  20 0   stroke-dashoffset  -50   x000D    100    stroke-dasharray  0 20   stroke-dashoffset  -125   x000D    x000D   x000D   flower2   x000D    animation  flower2 1s linear infinite  x000D    x000D   x000D   keyframes flower2   x000D    0      stroke-dasharray  5 20   stroke-dashoffset  25   x000D    50     stroke-dasharray  20 5   stroke-dashoffset  -50   x000D    100    stroke-dasharray  5 20   stroke-dashoffset  -125   x000D    x000D   x000D   backstreet boys   x000D    animation  backstreet boys 3s linear infinite  x000D    x000D   x000D   keyframes backstreet boys   x000D    0      stroke-dasharray  5 28 3   stroke-dashoffset  -225   x000D    15      stroke-dasharray  5 28 3   stroke-dashoffset  -300   x000D    30     stroke-dasharray  5 20   stroke-dashoffset  -300   x000D    45      stroke-dasharray  5 20   stroke-dashoffset  -375   x000D    60     stroke-dasharray  5 15   stroke-dashoffset  -375   x000D    75      stroke-dasharray  5 15   stroke-dashoffset  -450   x000D    90     stroke-dasharray  5 15   stroke-dashoffset  -525   x000D    100     stroke-dasharray  5 28 3   stroke-dashoffset  -925   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs d3 4 13 0 d3 min js  gt  lt  script gt  x000D   lt svg width  600px  height  700px  gt  lt  svg gt  x000D   x000D   x000D    Also available on CodePen  https   codepen io anon pen PeRazr

User · Answer

There s now a full-fledged plugin for that   http   msurguy github io ladda-bootstrap

User · Answer

You can use Bootstrap  Use  quot position  absolute quot  to make both buttons over each other  With the JavaScript code you can remove the front button and the back button will be displayed   x000D   x000D          button               position  absolute              top  50px              left  150px              width  150px              font-size  120               padding  5px              background   B52519              color   EAEAEA              border  none              margin  120px              border-radius  5px              display  flex              align-content  center              justify-content  center              transition  all 0 5s              height  40px                     orderButton hover               color   c8c8c8            x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 5 2 css bootstrap min css  gt    lt button gt  lt div class  spinner-border  gt  lt  div gt  lt  button gt   lt button id  orderButton  onclick  this style display   none    gt Order  lt  button gt  x000D   x000D   x000D

User · Answer

The only thing I found that worked was a post here  https   stackoverflow com a 44548729 9488229 I improved it  and now it provides all these features   Disable the button after click Show an animated loading icon using native bootstrap Re-enable the button after the page is done loading Text goes back to original when page loading is done  Javascript    document  ready function              btn   on  click   function             var e this          setTimeout function                 e innerHTML   lt span class  quot spinner-border spinner-border-sm quot  role  quot status quot  aria-hidden  quot true quot  gt  lt  span gt  Searching                  e disabled true            0           return true

User · Answer

To make the solution by  flion look really great  you could adjust the center point for that icon so it doesn t wobble up and down   This looks right for me at a small font size    glyphicon-refresh spinning     transform-origin  48  50

[button] How to add a spinner icon to button when it's in the Loading state?

Examples related to button

Examples related to twitter-bootstrap

Examples related to icons

Examples related to loading

Examples related to font-awesome