Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @bmaxtech/aurelia-loaders with all npm packages installed. Try it out:

var aureliaLoaders = require("@bmaxtech/aurelia-loaders")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@bmaxtech/aurelia-loaders v1.0.3

An Aurelia plugin for loading indicators

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

color schemes available for progress-bar and spinner elements
  • #B0BEC5 #B0BEC5 - default
  • #2196F3 #2196F3 - primary
  • #323a45 #323a45 - secondary
  • #64DD17 #64DD17 - success
  • #FFD600 #FFD600 - warning
  • #29B6F6 #29B6F6 - info
  • #ef1c1c #ef1c1c - danger

Usage of progress-bar element

preview

spinner-1

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 or danger | 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>

Usage of spinner element

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>

More about Spinners

SpinnerPreviewOptions
S1spinner-1type: S1, size: 100, color: HEX or RGB value
S2spinner-2type: S2, size: 100, color: HEX or RGB value
S3spinner-3type: S3, size: 100, color: HEX or RGB value
S4spinner-4type: S4, size: 100, color: HEX or RGB value
S5spinner-5type: S5, size: 100, color: HEX or RGB value
S6spinner-6type: S6, size: 100, color: HEX or RGB value
S7spinner-7type: S7, size: 100, color: HEX or RGB value
S8spinner-8type: S8, size: 100, color: [default, primary, secondary, success, warning, info, danger]
S9spinner-9type: S9, size: 100, color: HEX or RGB value
S10spinner-10type: S10, size: 100, color: [default, primary, secondary, success, warning, info, danger]
S11spinner-11type: S11, size: 100, color: [default, primary, secondary, success, warning, info, danger]
S12spinner-12type: S12, size: 100, color: HEX or RGB value
S13spinner-13type: S13, size: 100, color: HEX or RGB value
S14spinner-14type: S14, size: 100, color: [default, primary, secondary, success, warning, info, danger]
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free