Animated Refresh Button

I was trying to save room in a design and decided to try and merge a manual Refresh button with its loading indicator and Cancel button.

Click on the Refresh button to see the toggle animation.

Refresh
Cancel
HTML
<div class="container" >
  <div class="refresh" >
    <i></i>
    <span>Refresh</span>
  </div>
</div>

<div class="container busy" >
  <div class="refresh" >
    <i></i>
    <span>Cancel</span>
  </div>
</div>
CSS
.refresh {
  font-size : 12pt;
  padding : 10px;
  float : left;
  clear : both;

  cursor : pointer;

  border-radius : 4px;
  -webkit-box-shadow : 0 3px 14px #000
    , inset 0 1px 1px rgba(255,255,255,.7);
  -moz-box-shadow : 0 3px 14px #000
    , inset 0 1px 1px rgba(255,255,255,.7);
  -o-box-shadow : 0 3px 14px #000
    , inset 0 1px 1px rgba(255,255,255,.7);
  box-shadow : 0 3px 14px #000
    , inset 0 1px 1px rgba(255,255,255,.7);

  border : 1px solid #b6e026;

  background: #b6e026;
  background: -moz-linear-gradient(top, #b6e026 0%, #80ad20 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6e026), color-stop(100%,#80ad20));
  background: -webkit-linear-gradient(top, #b6e026 0%,#80ad20 100%);
  background: -o-linear-gradient(top, #b6e026 0%,#80ad20 100%);
  background: -ms-linear-gradient(top, #b6e026 0%,#80ad20 100%);
  background: linear-gradient(top, #b6e026 0%,#80ad20 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#80ad20',GradientType=0 );

  -webkit-transition : padding .2s;
  -moz-transition : padding .2s;
  -o-transition : padding .2s;
  transition : padding .2s;
}

.refresh i {
  opacity : 0;

  position : absolute;
  display : block;
  height : 30px;
  width : 30px;
  margin : -7px 0 0 -37px;

  -webkit-transition : opacity .2s;
  -moz-transition : opacity .2s;
  -o-transition : opacity .2s;
  transition : opacity .2s  
}

.busy .refresh {
  padding-left : 40px;

  color : #777;
  text-shadow : 0 1px 1px #fff;

  border-color : #fcfff4;

  background: #fcfff4;
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead));
  background: -webkit-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
  background: -o-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
  background: -ms-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
  background: linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );

  -webkit-transition : padding .2s;
  -moz-transition : padding .2s;
  -o-transition : padding .2s;
  transition : padding .2s;
}

.busy .refresh i {
  background : url(/resource/snippets/mini-loader-gray.gif) 50% 50% no-repeat;
  opacity : 1;

  -webkit-transition : opacity .3s .1s;
  -moz-transition : opacity .3s .1s;
  -o-transition : opacity .3s .1s;
  transition : opacity .3s .1s  
}

.container {
  clear : both;
  padding-top : 30px;
}

.container:first-child {
  padding : 0;
}
JavaScript
$('.container:first-child .refresh')
  .click(function() {
    var $this = $(this)
      , $text = $this.find('span')
      , $parent = $this.parent()
      , is_busy = $parent.hasClass('busy');

    // toggle the view
    if (is_busy) $text.text('Refresh'), $parent.removeClass('busy');
    else  $text.text('Cancel'), $parent.addClass('busy');

  });

Apr 11 2012

Animated Refresh Button

A button with a built-in loading indicator.