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="//code.jquery.com/jquery-3.1.0.slim.min.js"></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%
myChart.Update(80);

6. Config the battery chart:

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

Change log:

2016-10-29

• 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.