Fork me on GitHub

Demos

Created by
@KingRayhan

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