<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 */
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.