Radial Progress Bars

JavaScript

アニメーション付きのサークルプログレスバー「Radial Progress Bars」

Radial Progress Barsは、アニメーション付きのサークルプログレスバーを実装できます。SVGなどが使われています。スクロール時にプログレスバーが進捗状況をアニメーション付きで教えてくれるのでとても便利ですね。

Radial Progress Bars

Radial Progress Bars

デモでは下へスクロールしていくとサークルプログレスバーが進捗状況をアニメーション付きで教えてくれます。

82%、33%、71%など、複数のプログレスバーが用意されていて、それぞれのプログレスバーの中央には数値によるパーセンテージが表示されています。

このパーセンテージに応じてプログレスバーが円を描くようにアニメーションします。数値とプログレスバーの両方で教えてくれるので、視覚的にどのくらいの進捗状況かを瞬時に判断できますね。

デザインもシンプルで見やすく、いろんなサイトに合わせやすそうです。

というわけで、アニメーションが付いたサークルプログレスバーを実装できる「Radial Progress Bars」の紹介でした。

関連記事

  1. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  3. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  4. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  5. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

  6. Changing Background Color while scrolling

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP