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

no-imageグリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」前のページ

CSS3を使った豊富なスクロールエフェクト「stroll.js」次のページstroll.js

関連記事

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

    CSS

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

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

  2. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

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

    CSS

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

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

  4. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

  5. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  6. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP