ボタンをクリックすると。。。

Lock Pencil Save Remove Pause Download

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/style.css" rel="stylesheet" />
<link href="<PATH>/loda-button.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/loda-button.js"></script>
<script>
    $(window).load(function(){
		$('.loda-btn').lodaButton().click(function(e) {
			e.preventDefault();
			var _self = $(this);
			_self.lodaButton('start');
			setTimeout(function() {
				_self.lodaButton('stop');
			}, 2000);
		});
    });
</script>
<div id="lodaButtonDemo">
	<p class="title">ボタンをクリックすると。。。</p>
	<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-pencil"></span>
		Pencil
	</a>
	<a href="#" class="loda-btn">
		<span aria-hidden="true" class="loda-icon icon-disk"></span>
		Save
	</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-pause"></span>
		Pause
	</a>
	<a href="#" class="loda-btn">
		<span aria-hidden="true" class="loda-icon icon-download-2"></span>
		Download
	</a>
</div>

lodaButtonについて

lodaButtonは、アニメーションアイコン付きのボタンを設置できるプラグインです。 ajaxでサーバー応答中などに使うといい感じなりそうなプラグインです。 アイコンも複数用意されているので、いかがでしょう? アイコンフォントはicommonを利用されているようです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • champagne

    champagne

    指定要素内の要素をランダムにフェードインしながら表示

  • LivingFade

    LivingFade

    指定要素をランダムにフェードイン、フェードアウト

  • FlightBoard

    FlightBoard

    空港の発着情報ボードのようにパラパラパラと文字を切り替える

  • Wookmark

    Wookmark

    不揃いな要素たちをきれいにタイル上に敷き詰めてくれる

  • Highlighter

    Highlighter

    指定要素のみをハイライト表示