progresspieSVG

JavaScript

円形のプログレスバーを実装できる「progresspieSVG」

progresspieSVGは円形のプログレスバーを実装できるjQueryプラグインです。円形アイコン(プログレスバー)の横にパーセンテージを表示させたりすることができます。また、パーセンテージの大きさに合わせて円形バーが変化します。

progresspieSVG

デモ

デモではさまざまなカラーをしたアイコンがたくさんあります。そのほかオプションもいろいろと用意されているので、カスタマイズ性もかなり高いです。

パーセンテージの数値が増えることで徐々に円のかたちを形成させることもできます。

また、ボタンをクリックすると円形プログレスバーによる時間のカウントダウンが始まり、それに合わせてパーセンテージの円形プログレスバーが表示されるデモも用意されています。

優れたカスタマイズ性を備えた円形プログレスバーを実装したい方は、ぜひチェックされてみてはいかがでしょうか。

progresspieSVG

関連記事

  1. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  2. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  3. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  6. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP