(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

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

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

  2. CSS

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

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

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

    CSS

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

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

  4. CSS

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

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

  5. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

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

    CSS

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

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

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP