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. Animated Page Transition
  2. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  3. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  4. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  5. cubeTransition.js

    JavaScript

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

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

  6. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP