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」のご紹介でした。

StellarNav.jsレスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」前のページ

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

関連記事

  1. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  2. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  3. DateTime Picker

    JavaScript

    レスポンシブでフラットデザインの「DateTime Picker」

    DateTime Pickerはレスポンシブ対応のフラットデザインによ…

  4. BookBlock Revised
  5. TwentyTwenty

    JavaScript

    2枚の画像を見比べれるjQueryプラグイン「TwentyTwenty」

    TwentyTwentyは2枚の画像を見比べれる便利なjQueryプラ…

  6. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6
  5. iPad Air

アーカイブ

PAGE TOP