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で上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  2. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  3. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

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

    CSS

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

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

  5. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  6. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

最近の記事

  1. Hermèsオレンジスポーツバンド
  2. GoPro HERO8 Black
  3. 16インチMacBook Pro

アーカイブ

PAGE TOP