easybar: Custom Progressbar Examples

1. The simplest form. Just three parameters. Animation starts on page load. This can be changed.


var example1 = {
    selector: '#example1',
    value: 3,
    maxValue: 5
}

2. You can add an image to the end of the bar with just one more parameter.


var example2 = {
    selector: '#example2',
    value: 4,
    maxValue: 5,
    image: 'img/facebook.png'
}

3. You can trigger the animation using events. Here we use a click event.


var example3 = {
    selector: '#example3',
    value: 3,
    maxValue: 5,
    trigger: 'onClick',
    triggerSelector:'#example3btn'
}

4. Here we are using a mouseover event.


var example4 = {
    selector: '#example4',
    value: 3,
    maxValue: 5,
    trigger: 'onHover',
    triggerSelector:'#example4btn'
}

5. Change the bar colour (default: #3B5998) or the background (default: #f1f1f1)


var example5 = {
    selector: '#example5',
    value: 3,
    maxValue: 5,
    trigger: 'onClick',
    triggerSelector:'#example5btn',
    backgroundColour: '#F0F7D4',
    barColour: '#66B032'
}

6. You can alter the height of the bar.


var example6 = {
    selector: '#example6',
    value: 4,
    maxValue: 5,
    image: 'img/facebook.png',
    height: '4px',
    trigger: 'onClick',
    triggerSelector:'#example6btn'
}

7. You can use an image background instead of a block colour.


var example7 = {
    selector: '#example7',
    value: 3,
    maxValue: 5,
    trigger: 'onClick',
    triggerSelector:'#example7btn',
    barimage: 'img/stripes.jpg'
}

8. You can use an image for the background as well.


var example8 = {
    selector: '#example8',
    value: 3,
    maxValue: 5,
    trigger: 'onClick',
    triggerSelector:'#example8btn',
    backgroundImage: 'img/stripes_bw.jpg',
    barImage: 'img/stripes.jpg'
}

9. Linear and radial gradients are easy. Just tweak the barColour property.


var example9 = {
    selector: '#example8',
    value: 3,
    maxValue: 5,
    trigger: 'onClick',
    triggerSelector:'#example8btn',
    barColour: 'linear-gradient(to left, green, white)'
}