Progress Bars

Examples of progress bars can include displaying fundraising targets or completion progress. This snippet allows a website author to login and change the progress percentage using only a single short text element. The Javascript code reads the progress percentage and uses a template literal to interpolate the bar width, Accessible Rich Internet Applications (ARIA) attributes and the bar label.

Example

HTML & PHP

<p>Q1 Target</p>

<?php if(webyep_bIsEditMode() == false) : ?>
<div class="progress-bar"
data-progress-value="<?php endif; ?><?php webyep_shortText("Q1 Progress Bar", false, 550, 240); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" id="progress-bar-1"></div><?php endif; ?>

<p>Q2 Target</p>

<?php if(webyep_bIsEditMode() == false) : ?>
<div class="progress-bar"
data-progress-value="<?php endif; ?><?php webyep_shortText("Q2 Progress Bar", false, 550, 240); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" id="progress-bar-2"></div><?php endif; ?>

<p>Q3 Target</p>

<?php if(webyep_bIsEditMode() == false) : ?>
<div class="progress-bar"
data-progress-value="<?php endif; ?><?php webyep_shortText("Q3 Progress Bar", false, 550, 240); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" id="progress-bar-3"></div><?php endif; ?>

<p>Q4 Target</p>

<?php if(webyep_bIsEditMode() == false) : ?>
<div class="progress-bar"
data-progress-value="<?php endif; ?><?php webyep_shortText("Q4 Progress Bar", false, 550, 240); // WebYepV2 ?><?php if(webyep_bIsEditMode() == false) : ?>" id="progress-bar-4"></div><?php endif; ?>

CSS

.progress-bar {
    background-color: #eaeaea;
    height: 1.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem;
}

.bar {
    text-align: right;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-name: animatebars;
}

@keyframes animatebars {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* The bar labels */
.bar span {
    color: white;
    font-size: 14px;
    line-height: 1.1;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Sets the bar colours */
#progress-bar-1 .bar {
    background-color: #198754;
}

#progress-bar-2 .bar {
    background-color: #0dcaf0;
}

#progress-bar-3 .bar {
    background-color: #ffc107;
}

#progress-bar-4 .bar {
    background-color: #dc3545;
}

Javascript

const progressBars = document.querySelectorAll('.progress-bar');
progressBars.forEach((progressBar) => {
    const barValue = progressBar.dataset.progressValue;
    progressBar.innerHTML += `
    <div class="bar" 
        style="width:${barValue}%" 
        role="progressbar" 
        aria-valuenow="${barValue}" 
        aria-valuemin="0" 
        aria-valuemax="100"
     >
         <span>${barValue}%</span>
    </div>
    `;
});