0.2.0 • Published 7 years ago
ceri-progress v0.2.0
ceri-progress
A simple progress bar with included overlay.
Demo
Install
npm install --save-dev ceri-progress
Usage
Progress = require("ceri-progress")
# load the theme (see below)
window.customElements.define("ceri-progress", Progress(require("ceri-progress/materialize")))
progress = document.createElement("ceri-progress")
# block document.body with indetermined progress bar
progress.show({el:document.body, timeout: 5000, onTimeout: => return})
# change to determined progress bar with 10 percent progress
progress.percent = 10
# hide again
progress.hide()
Mixin
the progress bar can be used as a mixin within other ceri components:
...
mixins: [
require("ceri-progress/mixin")(require("ceri-progress/materialize"))
]
...
methods:
doSomething: ->
setPercent = @$progress({el:this})
setPercent(50)
setPercent() # close
Themes
Materialize
- setup ceri-materialize and load the scss.
// and this additional requirement
@import "~ceri-progress/materialize";
- load theme file
Progress = require("ceri-progress")
window.customElements.define("ceri-progress", Progress(require("ceri-progress/materialize")))
For example see dev/materialize
.
Development
Clone repository.
npm install
npm run dev
Browse to http://localhost:8080/
.
Notable changes
0.2.0
- use ceri-materialize@2
License
Copyright (c) 2017 Paul Pflugradt Licensed under the MIT license.