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

Tag-itサジェスト機能を搭載したタグ編集ウィジェット「Tag-it」前のページ

タッチ対応のドロワーコンポーネント「hy-drawer」次のページno-image

関連記事

  1. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  2. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  3. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  4. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  5. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  6. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP