how to make bootstrap progress bar dynamic for wordpress

Question

I want to make bootstrap progress bar dynamic for WordPress. I want to add custom field into admin panel (when want to write new post) and for example if i give value 6 it shows on progress bar as 60%, same by this between 0 till 10 for 0% until 100% of progress bar.

here is my html code of progress bar:

<p>
 <div class="progress progress-striped active">
   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%">IMDB Rating
<span class="sr-only"></span>
   </div>
 </div>
</p>

Thanks.

Answer 1

Hope this will help you.

<?php $progress = get_post_meta($post->ID, 'your_custom_field', true); ?>
<p>
<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="<?php echo $progress*10; ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?php echo $progress*10; ?>%">IMDB Rating
<span class="sr-only"></span>
</div>
</div>
</p>