glitchier-soc/app/javascript/flavours/glitch/components/loading_indicator.jsx
Renaud Chaput 81ef21a0c8 [Glitch] Rename JSX files with proper .jsx extension
Port 44a7d87cb1 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-02-25 14:35:31 +01:00

32 lines
776 B
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
export const CircularProgress = ({ size, strokeWidth }) => {
const viewBox = `0 0 ${size} ${size}`;
const radius = (size - strokeWidth) / 2;
return (
<svg width={size} heigh={size} viewBox={viewBox} className='circular-progress' role='progressbar'>
<circle
fill='none'
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
/>
</svg>
);
};
CircularProgress.propTypes = {
size: PropTypes.number.isRequired,
strokeWidth: PropTypes.number.isRequired,
};
const LoadingIndicator = () => (
<div className='loading-indicator'>
<CircularProgress size={50} strokeWidth={6} />
</div>
);
export default LoadingIndicator;