HTML Horizontal Bar Chart

HTML Horizontal Bar Chart
Code Snippet:Pure CSS horizontal bar chart with staggering animation
Author: Kriszta
Published: January 5, 2024
Last Updated: January 22, 2024
Downloads: 359
License: MIT
Edit Code online: View on CodePen
Read More

This code creates horizontal bar charts using HTML and CSS. It visually represents skill levels for various categories. It’s helpful for displaying skill proficiency levels at a glance. The code uses CSS animations to bring in the bars sequentially for a dynamic effect.

You can use this code on your portfolio site to showcase your skills visually. It helps visitors quickly grasp your proficiency levels across different areas. Its simplicity allows easy customization for various skill sets and categories.

How to Create Horizontal Bar Chart in HTML and CSS

1. First of all, load the Reset CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Create the HTML structure for the chart as follows. Modify the width values of the <li> elements under each skill category to represent your skill levels (from 0% to 100%). Adjust the text inside <span class="chart__label"> to reflect the corresponding skill or technology.

<div class="skills">
  <ul class="lines">
    <li class="line l--0">
      <span class="line__label title">
        Skill level:
      </span>
    </li>
    <li class="line l--25">
      <span class="line__label">
        The basics
      </span>
    </li>
    <li class="line l--50">
      <span class="line__label">
        Advanced
      </span>
    </li>
    <li class="line l--75">
      <span class="line__label">
        Seasoned
      </span>
    </li>
    <li class="line l--100">
      <span class="line__label">
        Expert
      </span>
    </li>
  </ul>
  
  <div class="charts">
    <div class="chart chart--dev">
      <span class="chart__title">Development</span>
      <ul class="chart--horiz">
        <li class="chart__bar" style="width: 98%;">
          <span class="chart__label">
            HTML5
          </span>
        </li>
        <li class="chart__bar" style="width: 98%;">
          <span class="chart__label">
            CSS3 & SCSS & CSS in JS
          </span>
        </li>
        <li class="chart__bar" style="width: 70%;">
          <span class="chart__label">
            JavaScript
          </span>
        </li>
        <li class="chart__bar" style="width: 60%;">
          <span class="chart__label">
            ReactJS
          </span>
        </li>
        <li class="chart__bar" style="width: 25%;">
          <span class="chart__label">
            AngularJS
          </span>
        </li>
        <li class="chart__bar" style="width: 60%;">
          <span class="chart__label">
            jQuery
          </span>
        </li>
        <li class="chart__bar" style="width: 55%;">
          <span class="chart__label">
            NodeJS
          </span>
        </li>
        <li class="chart__bar" style="width: 50%;">
          <span class="chart__label">
            Grunt / Gulp / Webpack
          </span>
        </li>
        <li class="chart__bar" style="width: 40%;">
          <span class="chart__label">
            .NET
          </span>
        </li>
        <li class="chart__bar" style="width: 60%;">
          <span class="chart__label">
            Umbraco
          </span>
        </li>
        <li class="chart__bar" style="width: 60%;">
          <span class="chart__label">
            Sitecore
          </span>
        </li>
      </ul>
    </div>
    
    <div class="chart chart--prod">
      <span class="chart__title">Productivity</span>
      <ul class="chart--horiz">
      <li class="chart__bar" style="width: 75%;">
        <span class="chart__label">
          Git + Github, Bitbucket & Sourcetree
        </span>
      </li>
      <li class="chart__bar" style="width: 80%;">
        <span class="chart__label">
          Microsoft Office
        </span>
      </li>
    </ul>
    </div>
    
    <div class="chart chart--design">
      <span class="chart__title">Design</span>
      <ul class="chart--horiz">
      <li class="chart__bar" style="width: 40%;">
        <span class="chart__label">
          Sketch
        </span>
      </li>
      <li class="chart__bar" style="width: 40%;">
        <span class="chart__label">
          Photoshop
        </span>
      </li>
      <li class="chart__bar" style="width: 35%;">
        <span class="chart__label">
          Illustrator
        </span>
      </li>
      <li class="chart__bar" style="width: 80%;">
        <span class="chart__label">
          User Experience
        </span>
      </li>
    </ul>
    </div>
  </div>
</div>

3. Now, style the bar chart using the following CSS code. You can modify CSS styles to match your website’s theme by adjusting colors, fonts, or dimensions.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
  margin: 20px 0 40px;
  font-family: "Open Sans", sans-serif;
  color: #282828;
}

.skills {
  width: 80%;
  max-width: 960px;
  height: 780px;
  height: 788px;
  margin: auto;
  position: relative;
}

.lines {
  height: 100%;
  position: relative;
}

.line {
  height: inherit;
  width: 2px;
  position: absolute;
  background: rgba(238, 238, 238, 0.6);
}
.line.l--0 {
  left: 0;
}
.line.l--25 {
  left: 25%;
}
.line.l--50 {
  left: 50%;
}
.line.l--75 {
  left: 75%;
}
.line.l--100 {
  left: calc(100% - 1px);
}

.line__label {
  display: block;
  width: 100px;
  text-align: center;
  position: absolute;
  bottom: -20px;
  right: -50px;
}
.line__label.title {
  text-transform: uppercase;
  font-weight: bold;
}

.charts {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.chart:not(:first-child) {
  margin-top: 10px;
}

.chart__title {
  display: block;
  margin: 0 0 10px;
  font-weight: bold;
  opacity: 0;
  animation: 1s anim-lightspeed-in ease forwards;
}
.chart--prod .chart__title {
  animation-delay: 3.3s;
}
.chart--design .chart__title {
  animation-delay: 4.5s;
}

.chart--horiz {
  overflow: hidden;
}

.chart__bar {
  height: 30px;
  margin-bottom: 10px;
  background: linear-gradient(to left, #4cb8c4, #3cd3ad);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  opacity: 0;
  animation: 1s anim-lightspeed-in ease forwards;
}
.chart--dev .chart__bar:nth-of-type(11) {
  animation-delay: 2.7s;
}
.chart--dev .chart__bar:nth-of-type(10) {
  animation-delay: 2.5s;
}
.chart--dev .chart__bar:nth-of-type(9) {
  animation-delay: 2.3s;
}
.chart--dev .chart__bar:nth-of-type(8) {
  animation-delay: 2.1s;
}
.chart--dev .chart__bar:nth-of-type(7) {
  animation-delay: 1.9s;
}
.chart--dev .chart__bar:nth-of-type(6) {
  animation-delay: 1.7s;
}
.chart--dev .chart__bar:nth-of-type(5) {
  animation-delay: 1.5s;
}
.chart--dev .chart__bar:nth-of-type(4) {
  animation-delay: 1.3s;
}
.chart--dev .chart__bar:nth-of-type(3) {
  animation-delay: 1.1s;
}
.chart--dev .chart__bar:nth-of-type(2) {
  animation-delay: 0.9s;
}
.chart--dev .chart__bar:nth-of-type(1) {
  animation-delay: 0.7s;
}
.chart--prod .chart__bar:nth-of-type(2) {
  animation-delay: 4.2s;
}
.chart--prod .chart__bar:nth-of-type(1) {
  animation-delay: 4s;
}
.chart--design .chart__bar:nth-of-type(4) {
  animation-delay: 5.8s;
}
.chart--design .chart__bar:nth-of-type(3) {
  animation-delay: 5.6s;
}
.chart--design .chart__bar:nth-of-type(2) {
  animation-delay: 5.4s;
}
.chart--design .chart__bar:nth-of-type(1) {
  animation-delay: 5.2s;
}

.chart__label {
  padding-left: 10px;
  line-height: 30px;
  color: white;
}

@keyframes anim-lightspeed-in {
  0% {
    transform: translateX(-200%);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

That’s all! hopefully, you have successfully created horizontal bar chart using HTML and CSS. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...