I do have bars with vertically rotated text, but I would like to have this text aligned near the bottom of each bar.
Here You can find the example: https://newacf.samui-infotech.asia/sample-page/
I tried to find some other sources and solutions, but could not find what I am doing wrong.
document.addEventListener('DOMContentLoaded', function () {
let bars = document.querySelectorAll('.vbc-bar');
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let bar = entry.target;
let percentage = bar.getAttribute('data-percentage');
bar.style.height = percentage + '%';
let percentageText = bar.querySelector('.vbc-percentage');
let currentPercentage = 0;
let increment = setInterval(() => {
if (currentPercentage >= percentage) {
clearInterval(increment);
} else {
currentPercentage++;
percentageText.textContent = currentPercentage + '%';
}
}, 20);
observer.unobserve(bar);
}
});
}, {
threshold: 0.1
});
bars.forEach(bar => {
observer.observe(bar);
});
});.vbc-bar-container {
width: 100px;
height: 300px;
border: 1px solid green;
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
overflow: hidden;
margin-right: 0.3rem;
margin-left: 0.3rem;
}
.vbc-bar {
width: 100%;
background-color: green;
text-align: center;
color: white;
position: absolute;
bottom: 0;
height: 0;
transition: height 2s ease;
display: flex;
align-items: flex-start;
justify-content: center;
}
.vbc-title {
/*writing-mode: vertical-rl;*/
transform: rotate(-180deg);
position: absolute;
bottom: 25%;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
white-space: nowrap;
font-size: 14px;
color: #000;
}
.vbc-percentage {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
margin-top: 10px;
}<div class="vbc-bar-container" id="vbc-bar-6677d489b49f0">
<div class="vbc-bar animated" data-percentage="75" style="--height: 75%; height: 75%;">
<span class="vbc-title">Sales Growth</span>
<span class="vbc-percentage">75%</span>
</div>
</div>I appreciate any help.