$(function() { $(".progress").each(function() { var value = $(this).attr('data-value'); var left = $(this).find('.progress-left .progress-bar'); var right = $(this).find('.progress-right .progress-bar'); if (value > 0) { if (value <= 50) { right.css('transform', 'rotate(' + percentageToDegrees(value) + 'deg)') } else { right.css('transform', 'rotate(180deg)') left.css('transform', 'rotate(' + percentageToDegrees(value - 50) + 'deg)') } } }) function percentageToDegrees(percentage) { return percentage / 100 * 360 } });
Script Copy url Copy url with Tag
Bootstrap CSS https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css copy copy script
Bootstrap JS https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js copy copy script
Icons https://use.fontawesome.com/releases/v5.8.1/css/all.css copy copy script
Jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js copy copy script

Related Snippets

Latest snippets
About this snippet

Bootstrap 4 Circular Progress Bar snippet is created by BBBootstrap Team using Bootstrap 4.1.1, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 Circular Progress Bar snippet example is best for Bootstrap progress-bar, responsive.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers