Init Scroller Bar js
Include scroller.js before closing the body tag & init scroll:
$('body').scroller();
Preview
Change Styles
Change color, height, border-radius & box-shadow:
$('body').scroller({
color : '#38d41b',//green
height : '40px',
radius : '10px',
shadow : true
});
Preview
Change Position
Choose position of scroller bar to start from top or bottom of document:
$('body').scroller({
color : '#38d41b',//pink
height : '40px',
position : 'bottom'
});
Preview
Show Percentage
Show percentage of with and change color:
$('body').scroller({
color : 'rgb(62, 62, 62)',//black
height : '40px',
percentage : true,
percentage_color : 'white'
});
Preview
Start Position
Choose if you want to start scroller from left or right of document:
$('body').scroller({
color : 'rgb(56, 212, 27)',//green
height : '40px',
start : 'right'
});
Preview
Options
All available options
| Option | Type | Default | Description |
|---|---|---|---|
| color | Varchar | 'red' | Color of scroller bar |
| height | Varchar | '3px' | Height of scroller bar |
| position | Varchar | 'top' | Position of scroller bar ('top' or 'bottom') |
| percentage | Boolean | true | Show percentage |
| percentage_color | Varchar | #fff (white) | Color of percentage number |
| radius | Varchar | 0px | Border Radius of scroller bar |
| shadow | Boolean | false | Box Shadow of scroller bar |
| start | Varchar | 'left' | Strart position ('left' or 'right') |