import * as React from 'react' ; export enum ProgressState { none = 'none' , loading = 'loading' , error = 'error' , completed = 'completed' } export interface ProgressBarProps { state : ProgressState ; percent ? : number ; height ? : number ; } const CLASS_NAME = 'ontodia-progress-bar' ; export class ProgressBar extends React . Component < ProgressBarProps , { } > { render ( ) { const { state , percent = 100 , height = 20 } = this . props ; const className = `${ CLASS_NAME } ${ CLASS_NAME }--${ state }` ; const showBar = state === ProgressState . loading || state === ProgressState . error ; return ( < div className = { className } style = { { height : showBar ? height : 0 } } > < div className = { `${ CLASS_NAME }__bar` } role = 'progressbar' style = { { width : `${ percent }%` } } aria - valuemin = { 0 } aria - valuemax = { 100 } aria - valuenow = { percent } > < /div> < /div>); } }