Simple KPI dashboard

Create a responsive KPI dashboard with Flexbox and HTML/CSS

For a personal project, I wanted to code a section displaying the main KPI (number of clients, client satisfaction …) on my landing page. This is very common in a lot of websites to quickly show achievements to potential new clients visiting the page. We will refer to that as KPI boxes in this article.

Yet, I found a lot of repository coding complex KPI dashboards to monitor website impact with graphs, but not for simple KPI boxes as I wanted, so I decided to do it here!

First, we need to code the HTML structure :

# index.html
<div class="kpi-section">
  <div>
    <div class="text-align">
      <h2>My website</h2>
    </div>
  </div>
  <div class="flex_response kpi">
    <div class="metric_box">
      <div>
        <span class="kpi-value">1850</span>
      </div>
      <div>
        <p class="kpi-title">User</p>
      </div>
    </div>
    <div class="metric_box">
      <div>
        <span class="kpi-value">71</span>
      </div>
      <div>
        <p class="kpi-title">Country</p>
      </div>
    </div>
    <div class="metric_box">
      <div>
        <span class="kpi-value">15</span>
      </div>
      <div>
        <p class="kpi-title">Year activity</p>
      </div>
    </div>
    <div class="metric_box">
      <div>
        <span class="kpi-value">99</span>
        <span>%</span>
      </div>
      <div>
        <p class="kpi-title">Satisfaction</p>
      </div>
    </div>
  </div>
  <p class="faker">These numbers are totally fake</p>
  <hr>
</div>

I chose to display the numbers of users, country, year of activity and percentage of satisfaction. Feel free to display any KPI you want. You may also want to add a title/message above or below you KPI boxes.

Secondly, we need to add a CSS property to add some style. Do not forget add <link rel="stylesheet" href="style.css"> to your HTML head.

# style.scss
.flex_response {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kpi-section {
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  width:80%;
}
.metric_box {
  margin-bottom: 30px;
  width:15%;
  text-align: center;
  margin: auto;
span {
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    color:rgba(72, 99, 160,1);
  }
p {
    font-size: 24px;
  }
}
.kpi {
  min-height: 200px;
  margin: auto;
  display: flex;
div {
    width: 200px;
  }
}
.kpi-title {
  font-size: 0.8rem;
  font-weight: bold;
}
.text-align {
  text-align: center;
}
.faker {
  text-align: center;
  font-size: 18px;
  color: grey;
}
hr {
  width: 40%;
  border: 1px solid rgb(200,200,200);
  text-align: center;
  margin-bottom: 15px;
}

I actually code in SCSS (to compile your scss to css, you can just use sass--watch style.scss:style.css commmand).

Anyway, this is responsive using flex-box with theflex-responseCSS class. Do not forget to add<meta name=”viewport” content="width=device-width=device-width,inital-scale=1" to your HTML head.

Thirdly, we can add some javascript to make a count animation from start to the KPI number over a specified time duration with the functionanimateValue below :

Basically, for each KPI value, we defined a callback steps computing the progress of the count animation from start to the designated KPI number based on duration. Then, it updates the displayed numbers for each time-unit in the HTML.

That’s all ! Of course, you can customize CSS property as much as you like depending on your website design, creativity and because you probably have better design skills than mine.

Thanks for reading !

Feedback are welcome and will be appreciated.

That all ! The code is available Here :