Nuns Playing Monopoly

    @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}"            <!-- 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

    Keywords

    none

    Install

    npm i @nrk/core-progress

    DownloadsWeekly Downloads

    138

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    12

    Last publish

    Collaborators

    • suxiang
    • norasv
    • eschoien
    • unaons
    • trulsl
    • syndrol
    • henit
    • mslhm
    • cbjerkan
    • hermangudesen
    • andreeldareide
    • henningkoller
    • davhu
    • oleob
    • meisen
    • espenhalstensen
    • hakonknutzen2
    • danjohnrk
    • olapeter
    • teodor-elstad
    • michaelpande
    • lysebraate
    • yngvar-nrk
    • lorecaster
    • wwalmnes
    • nrk-ps-teamcity
    • vincent.andersson
    • swla
    • nrk-midas-jenkins
    • andorpandor
    • jarlelin
    • aevare
    • nrkrichard
    • gesi
    • gundelsby-nrk
    • jonstalecarlsen
    • machineboy
    • vagifabilov
    • nrk-sofie-ci
    • nytamin
    • jesperstarkar
    • loftum
    • emte123
    • skjalgepalg
    • eirikhalvard
    • astokke
    • n640071
    • n07073
    • kristian.rosenvold
    • henrik-mattsson
    • eirikbacker
    • haavardm
    • popeindustries
    • yr
    • nrk-kurator-jenkins
    • toshb
    • torgeilo
    • nrk-user-sync
    • dhdeploy
    • janerikbr
    • espenwa
    • rogerhmar
    • ovstetun
    • eivind
    • stianlj
    • haraldkj
    • mariusu
    • spesialsnorre
    • cristobal
    • knuthaug
    • thohalv
    • johnarne
    • nrk-sup-jenkins
    • eshaswini
    • morrow
    • oyvindeh
    • laat
    • toggu
    • nrk-jenkins
    • plomma
    • evjand
    • moltubakk
    • ingridguren
    • lu-lux
    • andersli
    • silje
    • stiandg
    • sjurlur
    • anderscan
    • andipodnrk
    • pkej
    • yosrimti
    • zenangst
    • morten.nyhaug
    • ingvildcath
    • erlend.jones
    • brneirik
    • mollerse
    • eriksalhus
    • frdrks
    • tbnrk
    • nordanke
    • balte
    • mikaelrss
    • simonmitternacht
    • christiankarlsson9
    • martintorgersen
    • rebchr
    • steipal
    • discobus
    • ingvesund
    • martingundersen
    • tinkajts
    • hallvardlid
    • tomivar
    • ajaco
    • tobinus
    • mortenok
    • nrk-ark-deploy
    • jeangilbertlouis
    • heidimork
    • ingriddraagen
    • fridajalborg
    • bruusi
    • rosvoll
    • christianeide
    • enordby
    • artzag
    • glen_imrie
    • mia.aasbakken
    • elathamna
    • evjjan17
    • olatoft
    • kongsrud
    • chrpeter
    • ingvildforseth
    • esseb
    • talepre
    • haraldk76
    • stigok
    • dagfinno
    • johannesodland
    • anders993
    • vildefj
    • vildepk
    • malinaandahl
    • andreakn
    • rolerboler
    • meloygutt
    • anders.baggethun