Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @okiba/time-progress with all npm packages installed. Try it out:

var timeProgress = require("@okiba/time-progress")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@okiba/time-progress v1.0.26

Helper class used to normalize time on a duration between 0 and 1

Okiba / TimeProgress

Maps progress ovrer time, normalized between 0 and 1

__

import TimeProgress from '@okiba/time-progress'

const tp = new TimeProgress(400)
tp.setProgress(0.2)

 function loop() {
  const progress = tp.update()
  domeElement.style.opacity = progress

  if (progress > 0.8 || progress < 0.2) {
    tp.reverse()
  }

  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

Installation

npm i --save @okiba/time-progress

Or import it directly in the browser

<script type="module" src="https://unpkg.com/@okiba/time-progress/index.js"></script>

Usage

import TimeProgress from '@okiba/time-progress'

Untranspiled code 🛑

Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

constructor(duration)

Arguments

+ duration: | optional - default: 400

Amount of time it takes to reach progress = 1

update()

Has to be called at every loop or whenever you want get an updated progress

Returns

Number Normalized progress in time

reset()

Sets the timer back to zero

setProgress(progress)

Forces a certain progress, reflected on the time

Arguments

+ progress: Number

[description]

setDirection(direction)

Sets a direction in time. 1 is forward in time (progress goes from 0 to 1) -1 is backwards in time (progress goes from 1 to 0)

Arguments

+ direction: Number

1 is forward, -1 is backwards

reverse()

Reverses the direction in time

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free