jQuery

【jQuery】軽量のプログレスバープラグインLine Progress Bar

June 24, 2017
LineProgressbar

Line Progress Barは軽量のjQueryプログレスバープラグイン。

Include

<!-- In header -->
<link rel="stylesheet" href="jquery.lineProgressbar.css">

<!-- In footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lineProgressbar.min.js"></script>

Set HTML

<div id="progressbar1"></div>

Call the plugin

$('#progressbar1').LineProgressbar();

Plugin Options

Variable Default
percentage null
ShowProgressCount true
duration 1000
fillBackgroundColor '#3498db'
backgroundColor '#EEEEEE'
radius ‘0px’
height '10px'
width '100%'