Progress Bars

---

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

---

Semi Circle Progress Bar

Use .cl-progress-semicircle class to create Semi Circle Progress Bar and use data-range="0.85" to define range (Number from 0.0 to 1.0). Set font size of the percentage using data-font-size="3rem". Use data-options='{...}' to set options, you can read more about them here .

<div class="d-inline-block mr-5">
    <div class="cl-progress-semicircle" data-range="0.9"></div>
</div>
<div class="d-inline-block mr-5">
    <div class="cl-progress-semicircle" data-range="0.85" data-options='{"strokeWidth": 2}'></div>
</div>
<div class="d-inline-block">
    <div class="cl-progress-semicircle" data-range="0.92" data-options='{"strokeWidth": 6}' data-font-size="3rem"></div>
</div>

---

Circle Progress Bar

Use .cl-progress-circle class to create Circle Progress Bar and use data-range="0.85" to define range (Number from 0.0 to 1.0). Set font size of the percentage using data-font-size="3rem". Use data-options='{...}' to set options, you can read more about them here .

<div class="d-inline-block mr-5">
    <div class="cl-progress-circle" data-range="0.9"></div>
</div>
<div class="d-inline-block mr-5">
    <div class="cl-progress-circle" data-range="0.85" data-options='{"duration": 10000}'></div>
</div>
<div class="d-inline-block">
    <div class="cl-progress-circle" data-range="0.92" data-options='{"duration": 20000}' data-font-size="3rem"></div>
</div>

---

Line Progress Bar

Use .cl-progress-line class to create Circle Progress Bar and use data-range="0.85" to define range (Number from 0.0 to 1.0). Use data-options='{...}' to set options, you can read more about them here .

<div class="d-inline-block mr-5">
    <div class="cl-progress-line" data-range="0.9"></div>
</div>
<div class="d-inline-block mr-5">
    <div class="cl-progress-line" data-range="0.7" data-options='{"duration": 10000}'></div>
</div>