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)'
}