YuruToot/app/javascript/flavours/glitch/components/loading_indicator.jsx

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;