Animated Bar Chart Using HTML, CSS & JQuery

Animated Bar Chart Using HTML, CSS & JQuery

In this video, you are going to learn how to design an animated bar chart using HTML, CSS, and JQuery. First let's see what is the purpose of a bar chart. The purpose of a bar chart is to represent relational information as the bars display the quantity or persentage for a particular category.

In this video, you are going to learn how to design an animated bar chart using HTML, CSS, and JQuery. First let's see what is the purpose of a bar chart. The purpose of a bar chart is to represent relational information as the bars display the quantity or persentage for a particular category. The vertical axis of the bar chart is called the y-axis, while the bottom of a bar chart is called the x-axis. So let's see how to create this animated bar chart.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bar Chart</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>

    <!--chart start-->
    <div class="chart">
      <ul class="numbers">
        <li><span>100%</span></li>
        <li><span>50%</span></li>
        <li><span>0%</span></li>
      </ul>
      <ul class="bars">
        <li><div class="bar" data-percentage="50"></div><span>Option 01</span></li>
        <li><div class="bar" data-percentage="30"></div><span>Option 02</span></li>
        <li><div class="bar" data-percentage="60"></div><span>Option 03</span></li>
        <li><div class="bar" data-percentage="100"></div><span>Option 04</span></li>
        <li><div class="bar" data-percentage="80"></div><span>Option 05</span></li>
      </ul>
    </div>
    <!--chart end-->

    <script type="text/javascript">
    $(function(){
      $('.bars li .bar').each(function(key, bar){
        var percentage = $(this).data('percentage');
        $(this).animate({
          'height' : percentage + '%'
        },1000);
      });
    });
    </script>

  </body>
</html>

style.css


body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  background: #333;
}

.chart{
  width: 600px;
  height: 300px;
  display: block;
}

.numbers{
  color: #fff;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 100%;
  display: inline-block;
  float: left;
}

.numbers li{
  list-style: none;
  height: 150px;
  position: relative;
  bottom: 145px;
}

.numbers span{
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  right: 10px;
}

.bars{
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: #555;
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 500px;
  height: 300px;
  box-shadow: 0 0 10px 0 #555;
  border-radius: 5px;
}

.bars li{
  display: table-cell;
  width: 100px;
  height: 300px;
  position: relative;
}

.bars span{
  width: 100%;
  position: absolute;
  bottom: -30px;
  text-align: center;
}

.bars .bar{
  display: block;
  background: #17C0EB;
  width: 50px;
  position: absolute;
  bottom: 0;
  margin-left: 25px;
  text-align: center;
  box-shadow: 0 0 10px 0 rgba(23, 192, 235, 0.5);
  transition: 0.5s;
  transition-property: background, box-shadow;
}

.bars .bar:hover{
  background: #55EFC4;
  box-shadow: 0 0 10px 0 rgba(85, 239, 196, 0.5);
  cursor: pointer;
}

.bars .bar:before{
  color: #fff;
  content: attr(data-percentage) '%';
  position: relative;
  bottom: 20px;
}

html css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.

HTML and CSS Tutorial for Beginners | HTML and CSS | HTML CSS Tutorial

HTML and CSS Tutorial for Beginners will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags.

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

RESPONSIVE Personal PORTFOLIO Website HTML CSS And JAVASCRIPT

Responsive Personal Portfolio Website using HTML CSS & JavaScriptImages: https://bit.ly/353QF2ZDemo: https://edem-portfolio.netlify.app/Source Code: https://...