mPDF 6.0 Custom Progress Bar Issue - php

Question

I'm using mpdf 6.0.
The issue is when I css as 10%
<div class="progressbar">
<div class="progressbar-value bg-color-green" style="width: 10%; overflow: hidden;"> 10%</div>
</div>
The result as:
And when I add 3%, it covers the whole width
<div class="progressbar">
<div class="progressbar-value bg-color-green" style="width: 3%; overflow: hidden;"> 3%</div>
</div>
The result is:
Please guide me to solve this problem.
PHP:
<?php
set_time_limit(600);
ini_set('display_errors', 'Off');
ini_set("memory_limit","256M");
require 'mpdf.php';
$mpdf = new \mPDF();
$html = "";
$html .= <<<EOD
<div class="progressbar">
<div class="progressbar-value bg-color-green" style="width: 3%; overflow: hidden;"> 11%</div>
</div>
EOD;
$stylesheet = file_get_contents('style.css');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html, 2);
$mpdf->Output('','I');
exit;
?>
CSS (style.css):
.progress, .progress-bar, .progressbar {
position: relative;
display: block;
background: rgba(0, 0, 0, .05);
overflow: hidden;
font-weight: bold;
line-height: 20px;
height: 20px;
border-radius: 4px;
color: white;
}
.progressbar-value {
display: block;
white-space: nowrap;
overflow: hidden;
}
.text-left {
text-align: left !important;
}
.bg-color-green {
background-color: #61BD4F;
}

Answer 1

I solved the above issue by using background: linear-gradient() and background-size: x%
<div class="progressbar" style="float:left;">
<div class="progressbar-value" style="background-image: linear-gradient(to left, #00FF00 100%); background-size:3%;float:left; height:15px;width:100%;">
<div class="text" style="text-align: left; float: left;display:block;font-size:12px;height:15px;">3%</div>
</div>
</div>
Now the result is