@nrk/core-progress

## `@nrk/core-progress` enhances the `` element and makes it universally accessible

1.0.0
Source
npm

Version published: 6 years ago

Weekly downloads: 63; decreased by-41.67%

Maintainers: 109

Weekly downloads

Created: 6 years ago

Source

Core Progress

`@nrk/core-progress` enhances the `<progress>` element and makes it universally accessible

Installation

npm install @nrk/core-progress --save-exact

import coreProgress from '@nrk/core-progress'     // Vanilla JS
import coreProgress from '@nrk/core-progress/jsx' // ...or React/Preact compatible JSX

Demo

<!--demo-->
<label>Progress:
  <progress class="my-progress" value="20" max="100"></progress>
</label>
<script>
  // optional: init progress when attributes value or max are not present:
  // coreProgress('.my-progress', {value: 0, max: 100}); 
  coreProgress('.my-progress', 50); // update progress
</script>

<!--demo-->
<label>Indeterminate progress:
  <progress class="my-indeterminate-progress" max="100"></progress>
</label>
<script>
  // Progress is indeterminate when no value attribute is present. 
  coreProgress('.my-indeterminate-progress', 'Loading...'); 
</script>

<!--demo-->
<div id="jsx-progress"></div>
<script type="text/jsx">
  class MyProgress extends React.Component {
    constructor (props) {
      super(props)
      this.state = { value: 50, max: 100 }
    }
    render () {
      return <label> Progress JSX: 
        <CoreProgress className="my-jsx-progress" value={this.state.value} max={this.state.max} onChange={(state) => this.setState(state)} />
      </label>
    }
  }
  ReactDOM.render(<MyProgress />, document.getElementById('jsx-progress'))
</script>

Usage

HTML / Javascript

<label>Progress:
  <progress class="my-progress"></progress>
</label>

coreProgress(
  selector, // Selector string or HTML Element
  value // See table below
);

Possible values

Type	Example	Description
Integer	`50`	An integer updates the progress value directly
String	`'Loading...'`	A non-numerical string will indicate that the progress is indeterminate. The same string will be read by screen readers.
Object	`{value: 50, max: 100}`	An object can define a value and/or a max value

React / Preact

import CoreProgress from '@nrk/core-progress/jsx'

<CoreProgress value={Number|String} max={Number} onChange={(event) => {}} />

Events

Before a @nrk/core-progress changes state, a progress.change event is fired (both for VanillaJS and React/Preact components). The event is cancelable, meaning you can use event.preventDefault() to cancel the state change. The event also bubbles, and can therefore be detected both from the progress element itself, or any parent element (read event delegation):

document.addEventListener('progress.change', (event) => {
  event.target                  // The progress element
  event.detail.value            // The current progress value 
  event.detail.max              // The max progress value
  event.detail.percentage       // The calculated percentage from (value / max * 100)
  event.detail.indeterminate    // True if the progress is indeterminate (no value attribute)
})

Styling

The progress element can be a bit hard to style nicely, but CSS-tricks has some nice tips on how to make it pretty!

NOTE: Old browsers that don't support the progress element will get a <style> tag injected into <head>, which shows the percentage only.

FAQs

What is @nrk/core-progress?

Is @nrk/core-progress popular?

Is @nrk/core-progress well maintained?

Package last updated on 28 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install