• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

lightningtgc/MProgress.js: Material Progress —Google Material Design Progress l ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

lightningtgc/MProgress.js

开源软件地址(OpenSource Url):

https://github.com/lightningtgc/MProgress.js

开源编程语言(OpenSource Language):

JavaScript 59.7%

开源软件介绍(OpenSource Introduction):

MProgress.js

Google Material Design Progress Linear bar.

It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries.

Types and preview

Type 1. Determinate

Type 2. Buffer

Type 3. Indeterminate

Type 4. Query Indeterminate and Determinate

Or you can see all types together:

Vedio:Material Progress & activity

DEMO

See the Online demo

How to start

Install it

Include mprogress.min.js and mprogress.min.css in your target html file.

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

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

You can also install it via Bower or npm:

bower install --save mprogress
npm install --save mprogress

Basic usage

Example for the Determinate type

1.Instantiation:

var mprogress = new Mprogress();

2.Show and start the bar by using:

mprogress.start();

Or you can just use the following code to replace step 1 and 2:

var mprogress = new Mprogress('start');  //start it immediately

3.Finish the loading and hide it :

mprogress.end();

Advanced usage

All types have start and end methods.

Type1: Determinate

Determinate also has set and inc methods.

set(n)

Sets the progress bar status, where n is a number from 0.0 to 1.0.

eg:

mprogress.set(0.3);
inc()

Increases by a random amount.

eg:

mprogress.inc(); // Increase the bar with a random amount.
mprogress.inc(0.3); // This will get the current status value and adds 0.3 until status is 0.994

Type2: Buffer

Its always used for video loading, and you can use for other case.

Init Type Buffer :

var bufferIntObj = {
  template: 2
};
var bufferProgress = new Mprogress(bufferIntObj);
Start it:
bufferProgress.start();

If you want to start it immediately after instantiating it,you can use:

var bufferIntObj = {
  template: 2, // type number
  start: true  // start it now
};
var bufferProgress = new Mprogress(bufferIntObj);
End it:
bufferProgress.end();

Buffer also has set , inc and setBuffer methods

Type Buffer has two progress: main progress and buffer progress.

set(n)

Sets the main progress bar status (0,1)

setBuffer(num)

Sets the buffer progress bar status (0,1)

inc()

Increases by a random amount, including buffer bar.

Type3:Indeterminate

Init Type Indeterminate :

var intObj = {
  template: 3, 
  parent: '#customId' // this option will insert bar HTML into this parent Element 
};
var indeterminateProgress = new Mprogress(intObj);

Type Indeterminate just has start and end methods.

indeterminateProgress.start();

indeterminateProgress.end();

Type4:Query Indeterminate and Determinate

Init Type Query :

var intObj = {
  template: 4,
  parent: '#anothercustomId' // to other position
};
var queryProgress = new Mprogress(intObj);

Type Query just has start and end methods.

queryProgress.start();

queryProgress.end();

Configuration

Passing an object(configuration) to instantiated Mprogress

var mp = new Mprogress(configuration);

template

Set the progress bar type. (default: 1)

var mp = new Mprogress({
  // vaule { 
  //    1: Type Determinate,
  //    2: Buffer,
  //    3: Indeterminate, 
  //    4: Query,
  //  '<div>...</div>': 'yourcustomHTML'
  // }
  template: 2 
});

parent

Change the parent container where the bar is shown. (default: body)

var mp = new Mprogress({
  parent: '#customContainer' 
});

start

Start the bar immediately. (default: false)

var mp = new Mprogress({
  template: 4,
  start: true
});

For type1 Determinate, you can just use:

var mp = new Mprogress('start');

Advanced Configuration

trickle

trickleRate

trickleSpeed

minimum

easing

positionUsing

speed

Browser Support

Mobile First.

All types work in Chrome and Firefox.

Type Determinate works in all browsers.

License

MIT © gctang




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap