Infinite-time-progress-bar NPM

Infinite Time Progress Bar

Progress bar component based on Time

Preview

Installation

npm i infinite-time-progress-bar

Usage

include this files in your layout:

/dist/css/infinite-time-progress-bar.min.css
/dist/js/infinite-time-progress-bar.min.js

Put this html in your layout

<div id="my-time-progress-bar" class="infinite-time-progress-bar fade hide">
      <svg width="47" height="47">
        <circle
          class="time-progress-bar-circle"
          stroke="white"
          stroke-width="3"
          r="21"
          cx="75"
          cy="75"
        />
      </svg>
      <p></p>
</div>

Create new instance from InfiniteTimeProgressBar class

<script>
  const options = {
                 selector: "#my-time-progress-bar",
                 duration: 10000,
                 callback: yourCallbackFunction
              },
      progressBar = new InfiniteTimeProgressBar(options).render()
</script>

Options

option	type	Description	default
selector	`string`	Your element id or class	`.infinite-time-progress-bar`
duration	`integer`	Remaining time to execute callback function(based on millisecond, minimum: 1000)	5000
callback	`function`	Callback function for execute when timer is ended	Void