Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Spinner for Twitter Bootstrap .btn

Spinner for Twitter Bootstrap .btn

Problem

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-large.active .spinner {
    width: 19px;
}

The deal is that css "margin: auto" doesn't produce expected animation and spinner widths for all elements should be defined via css. Is there are any way to solve this problem? Also, maybe there are better way to align/show spinners?

And should i play with buttons padding and make it in way, where button width doesn't change, when spinner is shown or buttons that change width is ok? (If ill put it as snippet somewhere)

Problem courtesy of: Andrew Dryga

Solution

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 */
}
Solution courtesy of: Andrew Dryga

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Spinner for Twitter Bootstrap .btn

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×