Radial Progress Bars

JavaScript

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

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

Radial Progress Bars

Radial Progress Bars

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

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

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

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

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

no-imageスマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」前のページ

スタイリッシュなホバーナビゲーションを実装できる「Recursive Hover Nav (Only CSS)」次のページRecursive Hover Nav

関連記事

  1. gridscrolling.js
  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  4. Choice.js
  5. Animated Toggle Menu

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP