Responsive Customizable Bar Indicator with jQuery - Bars.js

Responsive Customizable Bar Indicator with jQuery - Bars.js
File Size: 5.52 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Bars.js is a lightweight jQuery plugin that enables you visualize numeric data into responsive, dynamic, fully styleable bar indicators.

See also:

How to use it:

1. Load the required CSS file bar.css in the head section of the document.

<link href="bars.css" rel="stylesheet">

2. Load the JavaScript file Bars.js after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="bars.js"></script>

3. Visualize the numeric data wrapper in the DIV elements into a bar group. By default, Bars.js finds the highest value in a bar group and bases the comparison on that. All CSS helper:

  • thin: thin bars
  • thick: thick bars
  • n_bg: no background
  • gradient: gradient colors
  • c_red: custom colors. c_red, c_green, c_blue, c_pink, or c_brown
  • elastic: elastic animation
<div class='bar_group'>
  <div class='bar_group__bar thin' value='230'></div>
  <div class='bar_group__bar thin' value='130'></div>
  <div class='bar_group__bar thin' value='160'></div>
  <div class='bar_group__bar thin' value='340'></div>
  <div class='bar_group__bar thin' value='290'></div>
</div>

4. Show labels, tooltips, values and units on the bars.

<div class="bar_group__bar thin" label="Vuaxhall Corsa" show_values="true" unit="mpg" value="343"></div>
<div class="bar_group__bar thin" label="Toyota Celica" show_values="true" unit="mpg" value="235"></div>
<div class="bar_group__bar thin" label="Landrover" show_values="true" unit="mpg" value="675"></div>
<div class="bar_group__bar thin" label="Peagueot 106" show_values="true" unit="mpg" value="456"></div>
<div class="bar_group__bar thin" label="Lawnmower" show_values="true" unit="mpg" value="245"></div>

This awesome jQuery plugin is developed by jcoulterdesign. For more Advanced Usages, please check the demo page or visit the official website.