packageDocumentation module import "./LoadingBar.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { CommonProps } from "../utils/Props" ; public export interface LoadingBarProps extends CommonProps { /** Percent */ percent : number ; /** Show percentage (optional) */ showPercentage ? : boolean ; /** Height (in pixels) of the loading bar */ barHeight : number ; } public export class LoadingBar extends React . PureComponent < LoadingBarProps > { public static defaultProps : Partial < LoadingBarProps > = { barHeight : 4 } ; public override render ( ) { const percent = `${ percentInRange ( this . props . percent ) }%` ; const containerClass = classnames ( this . props . className , "core-lb" ) ; return ( < div className = { containerClass } style = { this . props . style } > < div className = "lb-container" style = { { height : this . props . barHeight } } > < div className = "fill" style = { { width : percent } } /> < /div> { this . props . showPercentage && < span className = "percent" > { percent } < /span>} < /div>); } } internal export function percentInRange ( percent ) { let value = Math . min ( percent , 100 ) ; value = Math . max ( value , 0 ) ; return value ; }