Progress bar horizontal

Progress bar radial

Leadership

Management

Innovation and creativity

Resilience

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>

Progress bar with round line

Leadership

Management

Innovation and creativity

Resilience

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>

Progress bar with gradient

Leadership

Management

Innovation and creativity

Resilience

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>