@nrk/core-progress

    2.0.8 • Public • Published

    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}"            <!-- OptionalDefault "linear"Type of progressPossible 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

    Keywords

    none

    Install

    npm i @nrk/core-progress

    DownloadsWeekly Downloads

    84

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar