ajax向け!アニメーションするロードボタンがかわいい「LODA BUTTON」

「LODA BUTTON」はクリックすることでアイコンがアニメーションするロードボタンです。ajax処理に使えそうですね。

「LODA BUTTON」

screenshot355

シンプルなデザインが良いですね。アイコンはフォントで表現されており、リンク先より一式ダウンロードするとフォントファイルも含まれています。CSS3を使い作成されているので、対応ブラウザはChrome, Firefox, Opera, IE10となります。

ボタンをクリックすると灰色になり、アイコンがくるくると回転します。アニメーションはデフォルトで2秒間だそうです。

screenshot353

 

それでは「LODA BUTTON」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。icomon/style.cssはフォントアイコンを使うために必須のCSSです。

<link rel="stylesheet" href="icomon/style.css">
<link rel="stylesheet" href="loda-button.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="loda-button.js"></script>

 

HTMLはこのようにマークアップします。classに表示させたいフォントアイコンを指定します。

<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-lock"></span>
  Lock
</a>
<a href = "#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-drawer"></span> Archive
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-upload"></span> Upload
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-download"></span> Download
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-connection"></span> Connect
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-user"></span> User
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-search"></span> Search
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-phone"></span>
  Phone
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-star"></span>
  Star
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-remove"></span>
  Remove
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-mail"></span>
  Mail
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-flickr"></span>
  Flickr
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-share"></span>
  Share
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-file-pdf"></span>
  PDF
</a>
<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-disk"></span>
  Save
</a>

 

CSSはこのように指定します。デモ用です。

body {
  font-size: 100%;
  margin:    1em 5em 5em;
  font-family: 'Lucida Grande', sans-serif;
  text-align: center;
}
.loda-btn {
  margin: 0 1em 1em 0;
}

 

JavaScriptはこのように実装します。ここでアニメーションの時間を指定します。

$('.loda-btn').lodaButton().click(function(e) {
  e.preventDefault();

  var _self = $(this);
  _self.lodaButton('start');

  setTimeout(function() {
    _self.lodaButton('stop');
  }, 2000); //アニメーションの時間
});

 

するとこのように作ることが出来ました。

screenshot354

 

アイコンはお好みで変えてみても面白いかもしれません。参考にどうぞ。

 

Home > JavaScript > ajax向け!アニメーションするロードボタンがかわいい「LODA BUTTON」

Return to page top