52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
// License: LGPL-3.0-or-later
|
|
import { Color } from 'csstype';
|
|
import * as React from 'react';
|
|
import ScreenReaderOnlyText from './ScreenReaderOnlyText';
|
|
|
|
export interface SpinnerProps {
|
|
size: 'small' | 'normal' | 'large'
|
|
color?: Color
|
|
}
|
|
|
|
class Spinner extends React.Component<SpinnerProps, {}> {
|
|
static defaultProps = {
|
|
color: 'currentcolor'
|
|
}
|
|
|
|
generateStyle(): React.CSSProperties {
|
|
let spinnerDimension: number
|
|
let spinnerBorderWidth: number = 3
|
|
switch (this.props.size) {
|
|
case 'small':
|
|
spinnerDimension = 25
|
|
break;
|
|
case 'normal':
|
|
spinnerDimension = 50
|
|
break;
|
|
case 'large':
|
|
spinnerDimension = 100
|
|
break;
|
|
}
|
|
|
|
return {
|
|
display: 'inline-block',
|
|
width: `${spinnerDimension}px`,
|
|
height: `${spinnerDimension}px`,
|
|
verticalAlign: 'text-bottom',
|
|
border: `${spinnerBorderWidth}px solid ${this.props.color}`,
|
|
borderRightColor: 'transparent',
|
|
borderRadius: '50%',
|
|
}
|
|
|
|
}
|
|
render() {
|
|
return <div style={this.generateStyle()} role="status">
|
|
<ScreenReaderOnlyText>Loading...</ScreenReaderOnlyText>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
export default Spinner;
|
|
|
|
|
|
|