MENU
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
PCやMacの性能を100%発揮
ソフトアンテナ
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
ソフトアンテナ
  • このブログに関して
  • 特集アーカイブ
    • Windows更新情報
    • Windows11使いこなし
    • Windows 10使いこなし
    • macOS/iOS/iPadOS更新情報
    • macOS使いこなし
    • iOS使いこなし
    • Webブラウザ更新情報
  • ソフトウェア
  • Windows
  • Mac
  • iOS
  • セール
  1. ホーム
  2. レビュー
  3. MProgress.js - Googleのマテリアルデザイン風プログレスバー

MProgress.js - Googleのマテリアルデザイン風プログレスバー

2017 3/22
レビュー
2015年2月5日 2017年3月22日
  • URLをコピーしました!

S 20170322 182100

Googleが提唱するデザインガイドライン「マテリアルデザイン」。フラットながら物の質感を感じさせるという特徴を持ちAndroidや、GoogleのWebサイトなど、様々な場面で活用されています。

今回紹介する「MProgress.js」は、そのマテリアルデザイン風のプログレスバーを実現するJavaScriptライブラリです。GitHubでソースコードが公開されているCSS3とJavaScriptで実装されたライブラリで、他のライブラリへの依存がなく導入しやすいのが特徴です。

以下詳しくご紹介。

目次

MProgress.jsのサンプル

MProgress.jsでは、Determinate、Buffer、Indeterminate、Query Indeterminate and Determinateといった4つのタイプのプログレスバーを使用することができます。

S 20170322 182524

▲画像では分かりづらいのですが動画を見ると、それぞれアニメーション効果が異なっていることがよく分かります。Determinateが一番普通のプログレスバーとなっています。

S 20170322 182204

▲また公式サイトのトップがオンラインデモになっていて、実際にボタンをクリックして、プログレスバーを操作することができます。ボタンをクリックすると実際のプログレスバーが画面に表示されます。

MProgress.jsの使用法

MProgress.jsを使用するHTMLファイルで以下のように指定します。

<link rel='stylesheet' href='mprogress.min.css'/>

<script src='mprogress.min.js'></script>

使用する側ではMprogressをインスタンス化するだけで使えます。

var mprogress = new Mprogress();
mprogress.start();
mprogress.end();

プログレスバーを表示するタグの指定や、プログレスバーの種類を指定することもできます。細かな設定は公式サイトでご確認ください。

まとめ

MProgress.js を使えばGoogleマテリアルデザイン風のプログレスバーを手軽に実装することができます。WebサイトやWebアプリケーションでプログレスバーを使いたい場合に利用すると便利です。

レビュー
progressbar UI
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • Hacker Newsの話題度が分かるChrome拡張「HNRank」
  • スクエニ、「ファイナルファンタジーポータルアプリ」を配信開始。先着100万人限定で初代FFが無料!

関連記事

  • git-sim - 自分のリポジトリでGit操作可視化
    2023年1月31日
  • Carbonyl - ターミナル内で実行できるChromiumブラウザ
    2023年1月30日
  • PowerToys: PowerRename - 複数のファイルをまとめてリネームすることができるユーティリティ
    2023年1月27日
  • HiDock - ディスプレイ構成ごとにDockの設定を保存できるフリーソフト
    2023年1月26日
  • Lickable Menu Bar - 懐かしのメニューバースタイルを最新のmacOSで再現
    2023年1月20日
  • Homerow - macOSをキーボードだけでプロのように操作することができるユーティリティ
    2023年1月6日
  • ExplorerPatcher - Windows 11のタスクバーをWindows 10風に変換することができるツール
    2023年1月5日
  • Swift Quit - ウィンドウを閉じたタイミングでアプリ自動終了させることができるMac用ユーティリティ
    2022年12月31日
スポンサーリンク
サイト内検索
特集アーカイブ
  • Windows更新情報
  • Windows11使いこなし
  • Windows 10使いこなし
  • macOS/iOS/iPadOS更新情報
  • macOS使いこなし
  • iOS使いこなし
  • Webブラウザ更新情報
Feedlyに登録

登録お願いします!

follow us in feedly

人気記事
  • Lp logo 3 1000x657 質問に対し流暢な日本語で回答してくれる「ChatGPT」が公開 - 試し方はこちら
  • S 20230125 112030 Microsoft Edgeに「ウィンドウの分割」機能が導入。2つのページを同時に閲覧可能に
  • S 20230119 111028 Microsoft、Windows 11 22H2でシステムの復元ポイントがアプリを破壊する事を確認
  • Mac mini M2 2023 【悲報】M2搭載ローエンドMac miniとMacBook ProのSSD速度は前世代より低下
  • S 20221123 111042 Windows 11のタスクトレイ時計の秒表示を有効にする方法
  • S 20221206 204658 メニューバーから対話できる「ChatGPT for Mac」がリリース
  • S 20210923 114221 Windows 11で「管理ツール」を開く方法
  • S 20220219 172234 【Tips】iPhoneで撮影した特定の写真だけをiCloudに保存する方法
  • S 20230127 111050 Windows 11 Version 22H2用のプレビューアップデートKB5022360が公開 - タスクバー検索やIMEの不具合修正
  • Img3File M1/M2/Intel MacでWindows 11を実行できる「UTM 4.1」
カテゴリー
タグ
Amazon Android App Apple applewatch appsale Chrome Edge Firefox Git Github Google iOS iPad ipados iPhone iPhone6 iphone7 iphone8 iTunes JavaScript Kindle Linux Mac MacBook MacBookPro macos Microsoft Nintendo OS X OSX Parallels Rails Ruby Sale Steam Swift Twitter VMware Windows windows7 windows10 windows11 Wine Yosemite
新着記事
  • Adobe Creative Suite 6のライセンス認証期限が1月31日から再延長
  • 公式実装が待てない!Microsoftペイントでダークモードを今すぐ利用する方法
  • 【本日まで】Kindleストアで40%ポイント還元!講談社文庫ポイント還元セールが開催中
src256
ソフトアンテナを開発しています。

Windows/Mac/Linux全部使用中。ソフトウェア、ハードウェアいろいろなモノに興味があります。

好きなエディタはEmacs。好きな言語はRubyです。


srcw.net
  • プライバシーポリシー

© 2022 ソフトアンテナ

目次