Progress & Activity
Progress and activity indicators are visual indications of an app loading content or process executed.
Activity indicators
Metro 4 implements several activity indicators, which you can use easily and simply.
To create activity indicator add data-role="activity" attribute to element and define additional options.
The activity indicator type define with data-type=* attribute.
Currently supports four types for activity indicators:
ring,
metro,
square,
cycle.
In addition you can define color subtype for activity indicator with attribute data-style and predefined values: light (default), dark and color.
Ring
<div data-role="activity" data-type="ring"></div>
<div data-role="activity" data-type="ring" data-style="dark"></div>
<div data-role="activity" data-type="ring" data-style="color"></div>
Metro
<div data-role="activity" data-type="metro"></div>
<div data-role="activity" data-type="metro" data-style="dark"></div>
<div data-role="activity" data-type="metro" data-style="color"></div>
Square
<div data-role="activity" data-type="square"></div>
<div data-role="activity" data-type="square" data-style="dark"></div>
<div data-role="activity" data-type="square" data-style="color"></div>
Cycle
<div data-role="activity" data-type="cycle"></div>
<div data-role="activity" data-type="cycle" data-style="dark"></div>
<div data-role="activity" data-type="cycle" data-style="color"></div>
Simple
<div data-role="activity" data-type="simple"></div>
<div data-role="activity" data-type="simple" data-style="dark"></div>
<div data-role="activity" data-type="simple" data-style="color"></div>
Activity overlay
This feature available from 4.1.20
Metro 4 contains object to create activity overlay. This functionality stored in object Metro.activity. Object contains two methods: open({...}) and close(activity).
Options:
- type - string, valid activity type
- style - string, valid activity style
- autoHide - integer, milliseconds
- overlayClickClose - boolean, true or false
- overlayColor - string, hex value, ex:
#ffffff - overlayAlpha - float, from 0 to 1
- text - additional text. New in 4.2.0
<button class="button" onclick="
Metro.activity.open({autoHide: 3000})
">Open</button>
<button class="button" onclick="
Metro.activity.open({
type: 'metro',
overlayClickClose: true
})
">Open</button>
<button class="button" onclick="
var activity = Metro.activity.open({
type: 'square',
overlayColor: '#fff',
overlayAlpha: 1
});
setTimeout(function(){
Metro.activity.close(activity);
}, 5000)
">Open</button>
<button class="button" onclick="
Metro.activity.open({
type: 'square',
overlayColor: '#fff',
overlayAlpha: 1,
text: '<div class=\'mt-2 text-small\'>Please, wait...</div>',
overlayClickClose: true
});
">Open</button>
Progress indicator
Metro 4 implements four types of progress indicator.
To create progress indicator add data-role="progress" attribute to element and define additional options.
The progress indicator type you can define with data-type=* attribute. To set value and buffer add attributes data-value or/and data-buffer.
Progress bar
<div data-role="progress" data-value="35"></div>
<div data-role="progress" data-value="35" data-small="true"></div>
Progress bar with buffer
<div data-role="progress" data-type="buffer"
data-value="35" data-buffer="60"></div>
<div data-role="progress" data-type="buffer"
data-value="35" data-buffer="60" data-small="true"></div>
Progress bar with buffer and load indicator
<div data-role="progress" data-type="load"
data-value="35" data-buffer="75"></div>
<div data-role="progress" data-type="load"
data-value="35" data-buffer="75" data-small="true"></div>
Progress line
<div data-role="progress" data-type="line"></div>
<div data-role="progress" data-type="line" data-small="true"></div>
Customize
To set your own custom color use data-cls-back, data-cls-bar and data-cls-buffer attributes.
<div data-role="progress"
data-type="buffer"
data-cls-back="bg-yellow"
data-cls-bar="bg-blue"
data-cls-buffer="bg-pink"
data-value="25" data-buffer="65"></div>
Events
When the value or buffer changes in the progress, a change or/and buffer events is fired.
You can use this events to observe progress value and buffer.
$("#progress").on("valuechange", function(val){
console.log(val);
});
$("#progress").on("bufferchange", function(val){
console.log(val);
});
Callbacks
Progress indicator implements several callbacks to respond to a change in the status of the indicator:
| Function | Data-* | Desc |
| onValueChange(val, el) | data-on-value-change | Fired when value changes |
| onBufferChange(val, el) | data-on-buffer-change | Fired when buffer changes |
| onComplete(val, el) | data-on-complete | Fired when value is 100% |
| onBuffered(val, el) | data-on-buffered | Fired when buffer is 100% |
| onProgressCreate(el) | data-on-progress-create | Fired when element was created |
<div data-role="progress" data-type="load"
data-value="35" data-buffer="75"
data-on-complete="alert('Complete!!!')"
data-on-value-change="console.log(arguments)"
data-on-buffer-change="console.log(arguments)">
</div>
Observe
If you change data-value or data-buffer attributes at runtime, your progress will be updated.
<div id="progress-observe"
data-role="progress"
data-type="buffer" class="mb-4"></div>
<div>
<input id="progress-observe-value"
class="w-100" type="range"
min="0" max="100" value="0">
<input id="progress-observe-buffer"
class="w-100" type="range"
min="0" max="100" value="0">
</div>
<script>
$(function(){
$("#progress-observe-value").on("input change", function(){
$("#progress-observe").attr('data-value', this.value);
});
$("#progress-observe-buffer").on("input change", function(){
$("#progress-observe").attr('data-buffer', this.value);
});
})
</script>
Set and get value
Component progress provides method to get and set value for progress.
To set or get value use method val().
Also you can set and get values for buffer with method buff().
var progress = $("#element").data("progress");
var progress_value;
var buffer_value;
// set value
progress.val(35);
progress.buff(65);
// get value
progress_value = progress.val();
buffer_value = progress.buff();