no-image

JavaScript

さまざまなSVGパターンによるCSSプログレスバー「Bars」

Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実装できるのが特徴です。カラフルな模様や色をしたプログレスバーで、進捗度を楽しくチェックできるのがいいですね。アニメーションも滑らかで操作も手軽に行えます。

マウスオーバーでプログレスバーが伸びていく

デモ

デモではたくさんの種類のSVGパターンによるプログレスバーが用意されています。各プログレスバーにマウスオーバーすると、左から右へバーが伸びていきます。カラフルな模様によるバーがスムーズなアニメーションで伸びていくその動きはとてもオシャレですね。

また、SVGを使用しているので画面を拡大しても画像ファイルのように荒れることなく美しい状態を保持できるのも優れたポイントになります。多彩な模様を描けるプログレスバーだからこそ、SVGというメリットを大いに活かせるはず。

Bars

関連記事

  1. Protip

    JavaScript

    カスタマイズ性抜群のツールチップを実装できる「Protip」

    Protipはカスタマイズ性が抜群のツールチップを実装することができる…

  2. percircle

    JavaScript

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

    percircleはCSSによるパーセンテージのサークルを実装できるj…

  3. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  4. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  5. jquery-bubble-text

    JavaScript

    テキストがアニメーションで切り替わっていく「jquery-bubble-text」

    jquery-bubble-textは、テキストが次々に切り替わってい…

  6. Maximum Characters limit exceeded warning

最近の記事

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

アーカイブ

PAGE TOP