Humanity

Edit the world by your favorite way

画像なしでローディングアイコン (Angular コンポーネント)

Angular

CSS3 アニメーション楽しい。

Angular コンポーネント (追記)

書き忘れた。

ちなみにタグはコンポーネント化したので、以下の URL の場所に置いて

/component/tyru-loading-icon
/component/tyru-loading-bounce-icon

それぞれの .js を読み込めば<tyru-loading-icon>タグと<tyru-loading-icon>タグが使えるようになる。

    <script src="/lib/angular-1.5.5/angular.js"></script>

    <!-- 第1引数に渡す文字列と ng-app の属性値が同じである必要がある (例：<body ng-app='tyru'>) -->
    <script>
      angular.module('tyru', ['ui.bootstrap']);
    </script>

    <!-- <tyru-loading-icon> を使えるようにする -->
    <script src="/component/tyru-loading-icon/tyru-loading-icon.js"></script>

    <!-- <tyru-loading-bounce-icon> を使えるようにする -->
    <script src="/component/tyru-loading-bounce-icon/tyru-loading-bounce-icon.js"></script>

ただ Angular だとこのようにコンポーネントを組み込むにもいろいろ面倒なので、Angular アプリに組み込むんでなければ Riot.js とかで作った方がいいかなと思った。 Angular のモジュールとして組み込めるようにできると少しは楽なのかなと思ったけど、力尽きた。使う人いないだろうけど、もし興味持った人はソース見てください (投げやり)。 Chrome の DevTools だと動的に書き換えられた後の HTML ソースが表示されてしまうので、view-source:で見た方がわかりやすい。

TODO & FIXME (たぶんやらない)

TODO: Riot.js で書いてみる
FIXME: タグのプレフィックスがダサい