Createx Buy now

Progress radial

Custom progress radials featuring support for rounded progress circle, animated fill, and text labels.

Createx component

You can alter progress radial look and behavior via modifier flexible data API.

Basic HTML structure:
<div class="progress-radial" style="width: 150px;" data-progress-radial='{
  "text": {"value": "Label text"},
  "color": "#1e212c",
  "trailColor": "#e5e8ed",
  "strokeWidth": 6,
  "trailWidth": 6,
  "progress": 1
}'>
Data API:
data-progress-radial = '{}':
  • "progress": 1 - Returns current shown progress from 0 to 1
  • "strokeWidth": 6 - Unit is percentage of SVG canvas' size.
  • "trailWidth": 6 - Width of the trail stroke. Trail is always centered relative to actual progress path.
  • "color": "#1e212c" - Stroke color.
  • "trailColor": "#e5e8ed" - Trail color.
  • "easing": "easeOut" - Easing for animation.
  • "duration": 1000 - Duration for animation in milliseconds
  • "text": {"value": "Label text"} - Text options. Text element is a <p> element appended to container
  • For more options please visithttps://github.com/kimmobrunfeldt/progressbar.js

Sizing & progress

<!-- Radial progress property: -->
<!-- -float from 0 to 1 -->
<div class="progress-radial" style="width: 100px;" data-progress-radial='{
  "progress": 0.5
}'></div>

Stroke & trail width

<!-- Radial stroke & trail width: -->
<!-- -number -->
<div class="progress-radial" style="width: 100px;" data-progress-radial='{
  "strokeWidth": 8,
  "trailWidth": 4,
  "progress": 0.6
}'></div>

Stroke & trail color

<!-- Radial stroke & trail color: -->
<!-- -htms-hex or rgba-values -->
<div class="progress-radial" style="width: 100px;" data-progress-radial='{
  "color": "#f89828",
  "trailColor": "rgba(248,152,40, .3)",
  "strokeWidth": 8,
  "trailWidth": 4,
  "progress": 0.6
}'></div>

Label text

Projects

<!-- Radial label text (.progressbar-text): -->
<!-- -object -->
<div class="progress-radial" style="width: 150px;" data-progress-radial='{
  "text": {"value": "540+"},
  "color": "#f52f6e",
  "trailColor": "rgba(245,47,110, .3)",
  "strokeWidth": 8,
  "trailWidth": 4,
  "progress": 0.6
}'></div>
<p class="mt-3 pt-1 text-center fs-sm">Projects</p>

Inside flex wrapper

70%

Open Rate

200%

Growth in sales

<!-- Radial progress inside flex wrapper -->
<div class="d-flex align-items-center me-4 mb-4">
  <div class="progress-radial me-2 pe-1 ps-0" style="width: 80px;" data-progress-radial="{
    "strokeWidth": 8,
    "trailWidth": 8,
    "color": "#f52f6e",
    "trailColor": "rgba(245,47,110, .3)",
    "progress": 0.8
  }"></div>
  <div>
    <h2 class="mb-0">70%</h2>
    <p class="mb-0">Open Rate</p>
  </div>
</div>
Top