(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

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

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

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

    CSS

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

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

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

    CSS

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

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

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

    CSS

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

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

  5. CSS

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

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

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

    CSS

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

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

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP