Spinner for Twitter Bootstrap .btn

Question

Im trying to create spinners for Twitter Bootstrap buttons. Spinners should indicate some work in progress (ie. ajax request). Here is small example: http://jsfiddle.net/AndrewDryga/zcX4h/1/ HTML (full on jsfiddle): ``` Unknown element (no animation here!):

Works when width is defined:

Foo

``` CSS: ``` .spinner { display: inline-block; opacity: 0; width: 0; -webkit-transition: opacity 0.25s, width 0.25s; -moz-transition: opacity 0.25s, width 0.25s; -o-transition: opacity 0.25s, width 0.25s; transition: opacity 0.25s, width 0.25s; } /* ... */ .has-spinner.active .spinner { opacity: 1; width: auto; /* This doesn't work, just fix for unkown width elements */ } /* ... */ .has-spinner.btn.active .spinner { width: 16px; } .has-spinner.btn-la…

Accepted Answer

I was able to fix this problem by using max-width istead of width. Also this is pure CSS solution, so it can be used pretty much everywhere (for example show X mark on tags, when user hover mouse over it, etc).

Demo: http://jsfiddle.net/AndrewDryga/GY6LC/

New CSS:

```
.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

-webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
```

Spinner for Twitter Bootstrap .btn

Solution

Problem

Related problems