percircle

JavaScript

カスタマイズもできるパーセンテージのサークル実装「percircle」

percircleはCSSによるパーセンテージのサークルを実装できるjQueryプラグインです。ホバーでアニメーションしたりカラーやサイズを設定したりとカスタマイズして使うことも可能です。パーセンテージの値を数字だけではなく円形バーでも示してくれるので非常にわかりやすいですね。

percircle

percircle

サークルにホバーすると数値に色がつき拡大するアニメーションのデモなどが用意されています。サークルの中心にはパーセンテージの数値以外にもテキストや時間を表示させることもできます。

カラーやサイズも変更できるほか、アニメーションのオン・オフも可能なので、自分好みにカスタマイズして使いたい方にもピッタリかと思います。

使い方もシンプルでわかりやすいのがいいですね。

というわけで、カスタマイズもできる円形バーを実装したいという方は、ぜひチェックしてみてください。

jquery.markキーワードをハイライトしてくれる「jquery.mark」前のページ

YouTube動画をカンタンにループ再生(リピート)する方法次のページYouTube動画をループ再生する方法

関連記事

  1. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  2. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  3. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  4. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  5. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  6. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP