UI Molecules
Progress Status
1.1 Basic example
Criticité Faible
Criticité Moyenne
Criticité Forte
<!-- Success -->
<p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Faible</span></p>
<div class="amui-a-progress progress amui-m-progress__container">
<div class="amui-a-progress__bar progress-bar is--success is--low" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
<!-- Warning -->
<p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Moyenne</span></p>
<div class="amui-a-progress progress amui-m-progress__container">
<div class="amui-a-progress__bar progress-bar is--warning is--medium" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
<!-- Danger -->
<p class="amui-m-progress__title">Criticité<span class="amui-m-progress--level"> Forte</span></p>
<div class="amui-a-progress progress amui-m-progress__container">
<div class="amui-a-progress__bar progress-bar is--danger is--high" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
<script type="text/javascript">
$(document).ready( function () {
$('.amui-a-progress .amui-a-progress__bar.is--low').delay(400).queue(function() {
$(this).css('width', '30%');
});
$('.amui-a-progress .amui-a-progress__bar.is--medium').delay(400).queue(function() {
$(this).css('width', '65%');
});
$('.amui-a-progress .amui-a-progress__bar.is--high').delay(400).queue(function() {
$(this).css('width', '100%');
});
});
</script>