jQuery Progress Bar Plugin NUMBERPROGRESSBAR

Add-ons

2026-07-25 23:36 4 次浏览 • 0 次下载 41.6KB

jQuery Progress Bar Plugin NUMBERPROGRESSBAR

Plugin Description: A cute progress bar. Inspired by daimajia.

Installation

1	`bower install NumberProgressBar [--save]`

Usage

HTML

<div class="number-pb">
  <div class="number-pb-shown"></div>
  <div class="number-pb-num">0%</div>
</div>

CSS

You can refer to the number-pb.css file and customize it to suit your needs.

.number-pb {
  position: relative;
  height: 3px;
  background-color: #ddd;
}
.number-pb .number-pb-shown {
  position: absolute;
  background-color: #176785;
  background-image: linear-gradient(to right, #176785, #499989);
  top: -1px;
  left: 0;
  height: 5px;
  -moz-box-shadow:    0 0 3px 0 #499989;
  -webkit-box-shadow: 0 0 3px 0 #499989;
  box-shadow:         0 0 3px 0 #499989;
}
.number-pb .number-pb-num {
  position: absolute;
  background-color: #fff;
  left: 0;
  top: -0.45em;
  padding: 0 5px; 
}

javaScript

var bars = $('.number-pb').NumberProgressBar(options);
bars.reach(num);  // num is the percentage you want to achieve

Settings

OptionsDefaultUsage

duration10000Duration (in milliseconds) required to go from 0 to 100

percentage0Initial percentage

shownQuery'.number-pb-shown'Query string for the displayed bar

numQuery'.number-pb-num'Query string for the number