(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

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

関連記事

  1. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

  2. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  3. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  4. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  5. CSS

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

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

  6. CSS

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

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

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP