Grasp Mobile Progress Circle

JavaScript

アニメーションつきのプログレスサークルを実装できる「Grasp Mobile Progress Circle」

Grasp Mobile Progress CircleはHTML CanvasとjQueryで構築されたプログレスサークルを実装することができるjQueryプラグインです。進捗度をアニメーションつきで表示させることが可能です。

Grasp Mobile Progress Circle

Grasp Mobile Progress Circle

デモではあらかじめ設定された値まで進捗度を表すサークルバーがアニメーションつきで表示されます。サークルバーが変化していくと同時に、サークル内に表示された数値も設定された値まで増加していきます。

サークルバーと中心の数値により、どのくらいの進捗度なのかを瞬時に把握しやすいのがいいですね。

また、Grasp Mobile Progress Circleにはオプションもいくつか用意されているのでカスタマイズ性にも優れています。

主なオプションは、color、height、width、line_width、starting_position、percent、counter_clockwise、text、font_size、font_familyが用意されています。

幅や高さといったサイズをはじめ、カラーやフォントサイズ、フォントファミリーまで細かく指定できるので、好みに合わせたカスタマイズをしたい人にはうれしいですね。

というわけで、HTML CanvasとjQueryで構築されたアニメーションつきのプログレスサークルを実装できる「Grasp Mobile Progress Circle」のご紹介でした。

関連記事

  1. Material ScrollTop Button
  2. no-image

    JavaScript

    ミニマルでダイナミックなLightboxプラグイン「darkbox.js」

    darkbox.jsはミニマルながらもダイナミックなLightbox風…

  3. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  4. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

  5. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  6. Ace Responsive Menu

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP