<!-- Default -->
<h2 class="label">Red Coloured Progress</h2>

<div class="progress csu-red" data-label="15% Complete"><span class="value" style="width: 85%;"> </span></div>

<!-- Green -->
<h2 class="label">Green Coloured Progress</h2>

<div class="progress csu-green" data-label="45% Complete"><span class="value" style="width: 55%;"> </span></div>

<!-- Orange -->
<h2 class="label">Orange Coloured Progress</h2>

<div class="progress csu-orange" data-label="65% Complete"><span class="value" style="width: 35%;"> </span></div>

<!-- Purple -->
<h2 class="label">Purple Coloured Progress</h2>

<div class="progress csu-purple" data-label="85% Complete"><span class="value" style="width: 15%;"> </span></div>

<h2 class="label">{{ modifier }}</h2>

<div class="progress csu-{{ colour }}" data-label="{{ complete }}% Complete"><span class="value" style="width: {{ remaining }}%;"> </span></div>

Add one of the colour classes to the DIV then set the data-label with the overlay text and set the width to remainder - ensuring that it equals 100%