aurelia-loaders
This is an aurelia compatible plugin for loading indicators.
How to use aurelia-loaders
install @bmaxtech/aurelia-loaders
via npm
or yarn
npm i @bmaxtech/aurelia-loaders --save
or
yarn add @bmaxtech/aurelia-loaders
then register plugin with your application
aurelia.use.plugin(PLATFORM.moduleName('@bmaxtech/aurelia-loaders'))
use progress-bar
or spinner
element within your application
progress-bar
and spinner
elements
color schemes available for -
#B0BEC5
-default
-
#2196F3
-primary
-
#323a45
-secondary
-
#64DD17
-success
-
#FFD600
-warning
-
#29B6F6
-info
-
#ef1c1c
-danger
progress-bar
element
Usage of preview
basic usage
<progress-bar progress="50"></progress-bar>
advance usage
- style-class : string = used for external style configurations | default = ''
- height : integer = adjust progress bar height | default = 20px
- progress : integer = current progress | default = 0
- step : integer = progress bar incrementing step value | default = 10
- timer : boolean = auto-incrementer, if this is
true
, the progress bar will be automatically incremented | default = false - timer-interval : integer = auto-incrementer interval time in seconds | default = 2500 (2.5s)
- theme : string = color scheme of the progress bar, value can be
primary
,secondary
,success
,info
,warning
ordanger
| default =primary
- on-complete : function = callback function, when auto-incrementer is used, this function will be called when progress gets completed | default =
undefined
- show-value : boolean = show current progress percentage value in progress bar | default =
true
<progress-bar style-class="" height="" progress="" step="" timer="" timer-interval="" theme="" on-complete.call="" show-value=""></progress-bar>
spinner
element
Usage of common options :
- type : string = the spinner type, value can be
S1 to S14
| default =S1
- style-class : string = used for external style configurations | default = ''
- size : integer = the width and height | default :
40
- color : string = spinner color | default :
black
<spinner type="" style-class="" size="" color=""></spinner>