Basic
#demoprogressbar1
#demoprogressbar2
#demoprogressbar3
#demoprogressbar4
$('#demoprogressbar1').LineProgressbar({
percentage: 95
});
$('#demoprogressbar2').LineProgressbar({
percentage: 74
});
$('#demoprogressbar3').LineProgressbar({
percentage: 65
});
$('#demoprogressbar4').LineProgressbar({
percentage: 25
});
Fill Color
#demoprogressbar5
#demoprogressbar6
#demoprogressbar7
#demoprogressbar8
$('#demoprogressbar5').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#1abc9c'
});
$('#demoprogressbar6').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#9b59b6'
});
$('#demoprogressbar7').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#e67e22'
});
$('#demoprogressbar8').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#f1c40f'
});
Height
#demoprogressbar9
#demoprogressbar10
#demoprogressbar11
#demoprogressbar12
$('#demoprogressbar9').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#1abc9c',
height: '20px'
});
$('#demoprogressbar10').LineProgressbar({
percentage: 20,
fillBackgroundColor: '#9b59b6',
height: '25px'
});
$('#demoprogressbar11').LineProgressbar({
percentage: 91,
fillBackgroundColor: '#e67e22',
height: '35px'
});
$('#demoprogressbar12').LineProgressbar({
percentage: 36,
fillBackgroundColor: '#f1c40f',
height: '50px'
});
Radiusness
#demoprogressbar13
#demoprogressbar14
#demoprogressbar15
#demoprogressbar16
$('#demoprogressbar13').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#1abc9c',
height: '25px',
radius: '0px'
});
$('#demoprogressbar14').LineProgressbar({
percentage: 85,
fillBackgroundColor: '#9b59b6',
height: '25px',
radius: '15px'
});
$('#demoprogressbar15').LineProgressbar({
percentage: 72,
fillBackgroundColor: '#e67e22',
height: '53px',
radius: '50px'
});
$('#demoprogressbar16').LineProgressbar({
percentage: 98,
fillBackgroundColor: '#f1c40f',
height: '65px',
radius: '50px'
});
Unit
#demoprogressbar17
#demoprogressbar18
$('#demoprogressbar17').LineProgressbar({
percentage: 45,
unit: 'km/h'
});
$('#demoprogressbar18').LineProgressbar({
percentage: 85,
unit: 'm/s'
});
Animation
With animation
Without Animation
$('#demoprogressbar19').LineProgressbar({
percentage: 45,
animation: true
});
$('#demoprogressbar20').LineProgressbar({
percentage: 85,
animation: false
});