Minimal Battery Chart Plugin Using jQuery And CSS3 - Battery.js

File Size: 4 KB
Views Total: 3611
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Battery Chart Plugin Using jQuery And CSS3 - Battery.js

Battery.js is a very small jQuery plugin used for presenting your percentage values in a Battery-style horizontal bar chart using CSS3 Gradients.

How to use it:

1. Load the latest version of jQuery library and Battery.js script into your html page.

<script src="//"></script>
<script src="src/battery.js"></script>

2. Create a placeholder element for the battery chart.

<div id="battery"></div>

3. The basic CSS styles for the battery chart.

.battery {
  padding: 20px;
  padding-right: 30px;

.batFill { height: 71px; }

.bat-border {
  border: 4px solid black;
  border-radius: 15px;
  padding: 5px;
  display: inline-block;

.bat-ico {
  width: 0px;
  border: 4px solid black;
  height: 61px;
  display: inline-block;
  margin-bottom: 10px;

4. Initialize the plugin to present a specific percentage value (default: 40%) in the battery chart.

myChart = $("#battery").battery();

5. You're able to update the battery chart as this:

// 80%

6. Config the battery chart:

myChart = $("#battery").battery({
  batteryColor: "#61c419",
  backgroundColor: "lightgrey",
  maxWidth: 150,
  textColor: '#fff'

Change log:


  • added text support.

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