<div class="chart-layout hidden-scroll">
  <div class="chart-layout__item" style="--percent: 10%">10%</div>
  <div class="chart-layout__item" style="--percent: 20%">20%</div>
  <div class="chart-layout__item" style="--percent: 40%">40%</div>
  <div class="chart-layout__item" style="--percent: 90%">90%</div>
  <div class="chart-layout__item" style="--percent: 80%">80%</div>
  <div class="chart-layout__item" style="--percent: 40%">40%</div>
  <div class="chart-layout__item" style="--percent: 10%">10%</div>
  <div class="chart-layout__item" style="--percent: 20%">20%</div>
  <div class="chart-layout__item" style="--percent: 69%">69%</div>
  <div class="chart-layout__item" style="--percent: 96%">96%</div>
  <div class="chart-layout__item" style="--percent: 60%">60%</div>
  <div class="chart-layout__item" style="--percent: 88%">88%</div>
</div>
/* Chart layout */
.chart-layout {
  margin: 36px auto 0 auto;
  padding: 32px 0;
  height: 320px;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

.chart-layout__item {
  width: 60px;
  color: #fff;
  text-align: center;
  height: var(--percent);
  background-color: #EF5122;
  animation: grow-anim 0.5 linear;
  -webkit-animation: grow-anim 2.5s ease;
}

* {
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.