(cs)spinner

CSS

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

CSSだけでローディングアニメーションを実装できる「(cs)spinner」がとてもよかったのでご紹介。スタイルシートを読み込んで指定のクラスを付与するだけで使う事ができます。色んなパターンから選ぶことができて、どれもミニマルなデザインがとても素敵です。

[ads_center]

(cs)spinnerの使い方

以下は実際に使って試してみたものです。こんな感じのローディングアニメーションを表示させることができます。

(cs)spinnerを使用

バーになっているタイプや、

バーになっているタイプ

シャドウがかかっているタイプまで様々なデザインから選択できます。

シャドウがかかっているタイプ

使い方は、(cs)spinnerからダウンロードしたCSSファイルを読み込んで以下のようにHTMLを記述するだけです。csspinnerというクラス名を付与します。もう1つあるクラス(ここではtraditional)がローディングアニメーションのタイプになります。

<div class="csspinner traditional"></div>

色んなタイプがあるので自分の好きなものを指定することが可能です。

  • traditional
  • duo
  • double-up
  • sphere
  • sphere-vertical
  • bar
  • bar-follow
  • line
  • line grow
  • line back-and-fourth
  • shadow
  • shadow oval / shadow oval left
  • shadow oval right

画像いらずで手間もかからないのでかなり便利ですね。

軽量でカスタマイズもしやすいティッカーを実装できるjQueryプラグイン「jQuery Easy Ticker」前のページ

シンプルなテキストエディタを実装できるjQueryプラグイン「jQuery Notebook」次のページjQuery Notebook

関連記事

  1. CSS

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

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

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

    CSS

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

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

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

    CSS

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

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

  4. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  5. Three Dots

    CSS

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

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

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

    CSS

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

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

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP