@nrk/core-progress

Core Progress

@nrk/core-progress is an accessible progress element for displaying linear and radial progresses.

Example

<!--demo-->
<label>
  Progress:
  <span class="my-track">
    <core-progress value=".5"></core-progress>
  </span>
</label>

<!--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:
        <span className="my-track">
          <CoreProgress value={this.state.value} max={this.state.max} onProgressChange={(state) => this.setState(state)} />
        </span>
      </label>
    }
  }
  ReactDOM.render(<MyProgress />, document.getElementById('jsx-progress'))
</script>

<!--demo-->
<label>Indeterminate progress:
  <span class="my-track">
    <core-progress value="Loading..." max="100"></core-progress>
  </span>
</label>

<!--demo-->
<label>Radial progress:
  <span style="display:block;width:40px">
    <core-progress type="radial" class="my-radial" value=".75"></core-progress>
  </span>
</label>

Installation

Using NPM provides own element namespace and extensibility. Recommended:

npm install @nrk/core-progress  # Using NPM

Using static registers the custom element with default name automatically:

<script src="https://static.nrk.no/core-components/major/7/core-progress/core-progress.min.js"></script>  <!-- Using static -->

Remember to polyfill custom elements if needed.

Usage

HTML / Javascript

<div class="my-track">
  <core-progress type="{String}"            <!-- Optional. Default "linear". Type of progress. Possible values: "linear" and "radial" -->
                 value="{Number|String}"    <!-- Optional. Default 0. Value progress value. If string, indeterminate is set to true -->
                 max="{Number}"             <!-- Optional. Default 1. Maximum value. Progress percentage is calculated relative to this -->
                 indeterminate="{Boolean}"  <!-- Optional. Set indeterminate value -->
  </core-progress>
</div>

import CoreProgress from '@nrk/core-progress'                 // Using NPM
window.customElements.define('core-progress', CoreProgress)   // Using NPM. Replace 'core-progress' with 'my-progress' to namespace

const myProgress = document.querySelector('core-progress')

// Getters
myProgress.type                   // The progress type
myProgress.value                  // The current progress value
myProgress.max                    // The max progress value
myProgress.percentage             // The calculated percentage from (value / max * 100)
myProgress.indeterminate          // True if the progress is indeterminate (no value attribute)
// Setters
myProgress.type = 'radial'        // Set the progress type. Possible values: "linear" and "radial"
myProgress.value = .5             // Set the progress value. If string, indeterminate is set to true
myProgress.max = 10               // Set the max progress value
myProgress.indeterminate = true   // Set indeterminate value

React / Preact

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

<div className="my-track">
  <CoreProgress type={String}                   // Optional. Default "linear". Type of progress. Possible values: "linear" and "radial"
                value={Number|String}           // Optional. Default 0. Value of progress relative to max. If string, indeterminate is set to true
                max={Number}                    // Optional. Default 1. Maximum value. Progress percentage is calculated relative to this
                indeterminate={Boolean}         // Optional. Set indeterminate value
                ref={(comp) => {}}              // Optional. Get reference to React component
                forwardRef={(el) => {}}         // Optional. Get reference to underlying DOM custom element
                onProgressChange={Function} />  // Optional. Progress change event handler
</div>

Events

change

Fired when the progress value changes:

document.addEventListener('change', (event) => {
  event.target    // The progress element
})

Styling

For linear progress bars, wrap the <core-progress> in a container element that will work as the track and style it appropriately along with the progress:

<style>
.my-track { /* */ }
.my-track [value] { /* */ }
.my-track [indeterminate] { /* */ }
</style>

<div class="my-track">
  <core-progress value="Loading..." max="100"></core-progress>
</div>

For radial progress bars you don't need a wrapper. Use the following properties on the <core-progress> element itself to style track and progress:

Property	Affects	Example
color	Color of progress
stroke	Color of track
stroke-width	Percentage thickness