Fork me on GitHub
jquery.lineProgressbar.js

Data Attributes

Created by
@KingRayhan

Basic

#demoprogressbar1

#demoprogressbar2

#demoprogressbar3

#demoprogressbar4

	
<div line-progressbar data-percentage="95"></div>

<div line-progressbar data-percentage="45"></div>

<div line-progressbar data-percentage="65"></div>

<div line-progressbar data-percentage="85"></div>





Progress Color

#demoprogressbar5

#demoprogressbar6

#demoprogressbar7

#demoprogressbar8


<div 
    line-progressbar 
    data-percentage="25" 
    data-progress-color="#1abc9c"></div>

<div 
    line-progressbar 
    data-percentage="25" 
    data-progress-color="#9b59b6"></div>

<div 
    line-progressbar 
    data-percentage="25" 
    data-progress-color="#e67e22"></div>

<div 
    line-progressbar 
    data-percentage="25" 
    data-progress-color="#f1c40f"></div>

Height

#demoprogressbar9

#demoprogressbar10

#demoprogressbar11

#demoprogressbar12


<div 
    line-progressbar 
    data-percentage="25" 
    data-progress-color="#1abc9c" 
    data-height="20px"></div>

<div 
    line-progressbar 
    data-percentage="20" 
    data-progress-color="#9b59b6" 
    data-height="25px"></div>

<div 
    line-progressbar 
    data-percentage="91" 
    data-progress-color="#e67e22" 
    data-height="35px"></div>

<div 
    line-progressbar 
    data-percentage="36" 
    data-progress-color="#f1c40f" 
    data-height="50px"></div>

Radiusness

#demoprogressbar13

#demoprogressbar14

#demoprogressbar15

#demoprogressbar16


<div
	line-progressbar 
	data-percentage="25" 
	data-progress-color="#1abc9c" 
	data-height="25px" 
	data-radius="25px"></div>

<div
	line-progressbar 
	data-percentage="85" 
	data-progress-color="#9b59b6" 
	data-height="25px" 
	data-radius="15px"></div>

<div
	line-progressbar 
	data-percentage="72" 
	data-progress-color="#e67e22" 
	data-height="25px" 
	data-radius="25px"></div>

<div
	line-progressbar 
	data-percentage="98" 
	data-progress-color="#f1c40f" 
	data-height="65px" 
	data-radius="50px"></div>

Unit

#demoprogressbar17

#demoprogressbar18


<div 
    line-progressbar
    data-unit="km/h"
    data-percentage="25"></div>

<div
    line-progressbar
    data-unit="m/s"
    data-percentage="25"></div>

Animation

With animation

Without Animation


<div 
    line-progressbar
    data-animation="true"
    data-unit="km/h"
    data-percentage="25"></div>

<div
    line-progressbar
    data-animation="false"
    data-unit="m/s"
    data-percentage="25"></div>