Submit your widget

Number Progress Bar with jQuery

Created 5 years ago   Views 9118   downloads 1989    Author kalasoo
Number Progress Bar with jQuery
View DemoDownload 45.2 KB
63
Share |

This is a lovely number progressbar.

 

Installation

bower install NumberProgressBar [--save]
Usage
HTML
.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; 
}

Read more:https://github.com/kalasoo/NumberProgressBar#css