Core Progress
@nrk/core-progressis 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 NPMUsing 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> <!-- 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 valueReact / 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 |