Basic markup for classic Progress bar:
<div class="progress-bar-circle" data-value="0.4" data-gradient="#78abf1" data-empty-fill="rgb(245,245,245)" data-size="150" data-thickness="10"> <span></span> </div>
To get Progress bar with round line use data attribute data-line-cap='round'.
<div class="progress-bar-circle" data-value="0.4" data-gradient="#78abf1" data-empty-fill="rgb(245,245,245)" data-size="150" data-thickness="10" data-line-cap='round'> <span></span> </div>
To get Progress bar with gradient use data attribute data-gradient="main color, secondary color".
<div class="progress-bar-circle" data-value="0.4" data-gradient="main color, secondary color" data-empty-fill="rgb(245,245,245)" data-size="150" data-thickness="10" data-line-cap='round'> <span></span> </div>