Three Dots

CSS

シンプルで可愛いCSSローディングアニメーション「Three Dots」

Three Dotsはアニメーション付きのシンプルで可愛いCSSローディングアイコンを実装できるライブラリです。3つの点をベースにした多彩なローディングアニメーションが用意されています。

Three Dots

デモ

デモページでは点が縮小・拡大したりクルクルと回転したり横に流れていったりと、たくさんのアニメーション種類によるデモが用意されています。どれもシンプルでローディング中に表示させるには最適なアイコンになっています。

  • dot-elastic
  • dot-pulse
  • dot-flashing
  • dot-collision
  • dot-revolution
  • dot-carousel
  • dot-typing
  • dot-windmill
  • dot-bricks
  • dot-floating
  • dot-fire
  • dot-spin
  • dot-falling
  • dot-stretching

自分好みのアニメーションを選択できるのがうれしいですね。というわけで、シンプルで可愛いCSSローディングアニメーションを実装できる「Three Dots」の紹介でした。

Three Dots

関連記事

  1. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

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

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

  2. 背景画像のロゴをRetinaに対応させるCSS

    CSS

    背景画像のロゴをRetinaディスプレイに対応させるCSSのやり方

    背景画像のロゴをMacのRetinaディスプレイに対応させるCSSのや…

  3. CSS

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

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

  4. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

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

    CSS

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

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

  6. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP