Epic Spinners

CSS

CSSによる素敵なスピナーコレクション「Epic Spinners」

Epic SpinnersはCSSで作成された素敵なスピナーコレクションです。滑らかにアニメーションする、さまざまなスピナーが用意されています。それぞれにコピペ用のコードもあるので、手軽に実装できるのが嬉しいですね。Vue.jsとBootstrap 4で構築されているとのこと。

Epic Spinners

デモ

デモページにはたくさんのスピナーサンプルが設置されています。クルクル回転するものや形が変化するものなど多彩なアニメーションがあるので、見ているだけでも楽しいですね。これがCSSで作られているというのは驚きです。

各スピナーをクリックすると、HTMLやCSSなどのコードが表示されます。コピペで簡単に使えるので、サクッと実装できるはず。コードの右側には「Copy HTML」や「Copy CSS」などといったボタンが付いているので、ここをクリックすると各コードをコピーできます。

レスポンシブなレイアウトにも対応しているのがグッドです。

そんなわけで、素敵なローディングアニメーションを手軽に実装したいという人は、ぜひCSSによるスピナーコレクション「Epic Spinners」をチェックされてみてはいかがでしょうか?

Epic Spinners

関連記事

  1. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  2. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  3. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  4. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  5. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  6. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP