Progress bar

[James_Hurrell]

Hi,

has anyone made a dynamic progress bar you can drop into a form?

I've been looking at it and can find out how many tabs there are in a form and how many are complete but thought I'd check if anyone's already done it before I pull my hair out trying to make the rest of it.

Thanks,

James

[James_Hurrell · Accepted solution]

I've done it like this for now:

<style>
.pg-border {
border: 1px solid #949494!important;
border-radius: 4px;
}
.pg-green, .pg-hover-green:hover, .pg-green, .pg-hover-green:hover {
color: #000!important;
background-color: #2da343!important;
}

</style>
<div class="pg-border">
<div id="outcomeperc" class="pg-green" style="height:24px;"></div>
</div>
<script>
document.getElementById("outcomeperc").style.width = ({current_section_index}/{section_length}*100) + "%"
</script>

If you drop that into an html field on any form it creates a green progress bar that'll fill to the correct amount. Obviously you'd want to take the styling out of the html and put it into your css.

Once it's there change the green colour to anything you like.

When I've got some time I'll add text to it so it says how far th customer is through the form.