Core Progress
@nrk/core-progress
is an accessible progress element for displaying linear and radial progresses.
Example
<label>
Progress:
<span class="my-track">
<core-progress value=".5"></core-progress>
</span>
</label>
<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>
<label>Indeterminate progress:
<span class="my-track">
<core-progress value="Loading..." max="100"></core-progress>
</span>
</label>
<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 static registers the custom element with default name automatically:
<script src="https://static.nrk.no/core-components/major/10/core-progress/core-progress.min.js"></script>
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}"
max="{Number}"
indeterminate="{Boolean}"
</core-progress>
</div>
import CoreProgress from '@nrk/core-progress'
window.customElements.define('core-progress', CoreProgress)
const myProgress = document.querySelector('core-progress')
myProgress.type
myProgress.value
myProgress.max
myProgress.percentage
myProgress.indeterminate
myProgress.type = 'radial'
myProgress.value = .5
myProgress.max = 10
myProgress.indeterminate = true
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} />
</div>
Events
change
Fired when the progress value changes:
document.addEventListener('change', (event) => {
event.target
})
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 | |