• seo対策リンク SEO対策
    SEO対策で重要な被リンク元の調べ方 | 初心者向けのSEO対策ノウハウ
    2019年05月16日
  • SEO対策 SEO対策
    SEO初心者向けのSEO実践ノウハウ!7個のポイントをご紹介
    2019年05月16日
  • 歯医者さんのブログ記事 ブログ集客
    見ているだけ参考になる歯科のブログ3選!歯科のホームページ制作
    2019年03月12日
  • ブログ
    5分でブログサイト完成!ワードプレスで簡単ブログサイト作成術
    2019年03月28日
  • 被リンク対策 SEO対策
    SEO対策で重要な被リンク元の増やし方 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • Webデザイン ホームページ制作
    ホームページ制作はスマホファーストの時代!デバイスの多様化に対応
    2019年02月26日
  • ユーザー属性 SEO対策
    SEOでアクセス数アップを目指すには、10のユーザー種別の理解がポイント
    2019年05月16日
  • 被リンクの量と質 SEO対策
    SEO対策で重要な被リンク元の数と質 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • ローカル検索 SEO対策
    ローカルSEOの内部対策!商圏エリアで検索上位を獲得する方法
    2019年05月16日
  • 採用サイト ホームページ制作
    奈良の求人サイト制作会社が教えるIndeed活用ノウハウ!ダイレクト・リクルーティング
    2019年03月14日
プログレスバーを超簡単に実装できるprogressbar.jsを分かりやすく紹介

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回はプログレスバーを超簡単に実装できる
progressbar.jsについて分かりやすく紹介していきたいと思います。

progressbar.jsを使ってプログレスバーを実装する

今回ブログレスバーを実装するのに使うのが、
progressbar.jsというライブラリです。

とても簡単にプログレスバーが実装できるのでオススメです。

progressbar.jsって?

progressbar.js

progressbar.jsは、
誰でも簡単にかっこいいプログレスバーをSVGパスで作ることができるライブラリーで、
レスポンシブ対応もしています。

またアニメーションはモバイルデバイスでもうまく機能するようで、
線や三角、丸などの図形がいくつか用意されています。

もちろんカスタムでシェイプを作ることも可能です。

>>公式サイトをチェックする

progressbar.jsは以下からインストールしていただけます。
https://github.com/kimmobrunfeldt/progressbar.js

progressbar.jsでできること

progressbar.js

progressbar.jsを使えば、
LINEやCIRCLE、SEMICIRCLEなどの形以外にも、
パーセント表示や色で変化を表現、またアニメーションに変化をつけたりと、
様々なブログレスバーが作れます。

>>progreebar.jsのデモをチェックする

▼その他のデモも紹介
http://kimmobrunfeldt.github.io/progressbar.js/examples/upload/
http://kimmobrunfeldt.github.io/progressbar.js/examples/password-strength/

progressbar.jsを使う

progressbar.jsをインストールし、
ファイルを読み込む使用方法や、scriptタグで直接読み込む方法などがあります。

scriptタグで読み込む場合

プログレスバーを作ってみる

progressbar.js

とってもシンプルなプログレスバーを作ってみます。
以下にコピペでそのまま使えるコードを用意しました。

>>デモをチェックする

HTMLは<div id=”container”></div>のみでOKで、
divにIDをふるだけです。

JavaScriptはベーシックなプログレスバーを呼び出しています。

サークルのプログレスバーを作る

progressbar.js

こちらは先ほどとのラインとは違い、
サークルのプログレスバーです。

>>デモをチェックする

ポイントはCircleを呼び出しているところと、

秒ごとにanimateメソッドでプログレスを増やしている点です。(1000、3000、5000、8000)

最後にprogressbar.jsに関する詳しいドキュメンテーションをご紹介します。
https://progressbarjs.readthedocs.io/en/latest/

▼progressbar.jsについてまとめている記事を紹介
https://qiita.com/ansoposKAZ/items/e1f8fedf1f9b138e3a40
https://coliss.com/articles/build-websites/operation/javascript/js-progressbar-with-svg.html

関連キーワード
  • スライドギャラリー
    Flash非対応デバイス用のスライドギャラリーを実装!jQueryのサンプルコード付き
  • Ajax
    初心者向けjQuery!Ajaxでスムーズページングを実装 サンプルコード付き
  • SSL対応
    SSL対応ってなに?SSLの仕組みと意味をわかりやすく解説
  • jQuery
    jQueryでカルーセルパネルを実装!簡単jQueryのサンプルコード付き
  • jQuery
    jQueryの基本的な書き方!JavaScriptの基本文法を紹介
  • progressbar.js
    プログレスバーを超簡単に実装できるprogressbar.jsを分かりやすく紹介
ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事