Preview

Progress bar

Progress bar

Progress bar

90%

Progress bar

70%
60%

Lorem ipsum
dolerum

60%

Progress

Lorem ipsum dolerum

60%

Usage

<div class="progress-bar">
    <h4>Progress bar</h4>
    <div>
        <div data-progress="70">
            <span class="counter" data-to="70" data-speed="2000" data-unit="%">70%</span>
        </div>
    </div>
</div>

<div class="progress-circle" data-color="#379cf4" data-thickness="6" data-progress="60" data-size="185" data-linecap="round">
    <div class="content">
        <h4>Progress</h4>
        <p>Lorem ipsum dolerum</p>
        <div class="counter" data-to="60" data-speed="2000" data-unit="%">60%</div>
    </div>
</div>

Installation

<script src='themekit/scripts/progress.js'></script>

Settings

Name Type Description
Initialization Javascript
  • Add the attribute data-trigger="manual" to the component.
  • Run the function $('#target').progressCircle().
Manual initialization Attribute Add the attribute data-trigger="manual" to the component to stop the auto execution of the component on page load. Use this feature when the component is placed inside a container.
Circle settings Attribute
data-progress="123" Set the percentage of the progress bar from 0 to 100.
data-thickness="123" Set the width of circle in px.
data-size="123" Set the size of the progress bar for large screens, by default it fit the container width. On small screen the size is automatically set to 100%. Use the attribute data-size-md="123" to set the size on medium screens and the attribute data-size-sm="123" set the size on small screens.
data-color="#565656" Set the color of the progress bar in hexadeciaml color format. To get the color you want visit htmlcolorcodes.com/color-picker/.
Counter settings Attribute
data-from="0" Starting number of the counter.
data-to="100" Finish number of the counter.
data-speed="5000" Counter progress speed, in milliseconds.
data-refresh-interval="500" Counter refresh interval for update the displayed value, in milliseconds.
data-unit="%" The text after the number.
data-separator="." Set the char inserted between the numbers.
Documentation
Counter