3D Water Tank Progressbar & Column Chart Plugin - jQuery waterTank

3D Water Tank Progressbar & Column Chart Plugin - jQuery waterTank

The jQuery waterTank plugin makes uses of JavaScript, CSS3, and HTML5 canvas element to create 3D Water Tank style progress bars or column charts that will ripple by cursor interaction.

You're able to customize the width/height/color/level of the water tank. Can be used to represent percentage values in an elegant way.

1. Load the latest version of jQuery library and the waterTank plugin's script at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="./waterTank.js"></script>

2. Create an element to hold the water tank.

<div class="tank example">
  
</div>

3. Initialize the plugin and set the height/width of the water tank.

$('.example').waterTank({
  width: 200,
  height: 400
})

4. Customize the background color of the water tank.

$('.example').waterTank({
  width: 200,
  height: 400,
  color: 'skyblue'
})

5. Set the initial percentage value.

$('.example').waterTank({
  width: 200,
  height: 400,
  color: 'skyblue',
  level: 80
})

6. Animate the water tank to a new value.

$('.example').waterTank(50)

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

  • Publication date: 01.07.2018
  • Source