Progress Line in Typescript with material UI

index.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useStyles } from './styles';

interface IProps {
  current: number;
  total: number;
}

const Progress = ({
  current,
  total
}: IProps): React.ReactElement => {
  const styles = useStyles();
  const { t: translate } = useTranslation();

  function makeFraction(): string {
    return `${Number(current)}/${Number(total)}`;
  }

  return (
    <div className={styles.container}>
      <div className={styles.loadingTrack}>
        <div className={styles.loadingBar} style={{ width: `${(current / total) * 100}%` || 0 }} />
      </div>
      <div className={styles.details}>
        <div className={styles.fraction}>
          {makeFraction()}
        </div>
        <div className={styles.message}>{translate('testDuration')}</div>
      </div>
    </div>
  );
};

export default Progress;

styles.ts

import {
  createStyles,
  darken,
  lighten,
  makeStyles
} from '@material-ui/core/styles';

const progressBarHeight = 5;
const progressBarRadius = 1;

export const useStyles = makeStyles((theme) => createStyles({
  container: {
    display: 'flex',
    flexDirection: 'column',
    margin: '0px 16px'
  },
  loadingTrack: {
    height: progressBarHeight,
    borderRadius: progressBarRadius,
    margin: '10px 0px',
    backgroundColor: lighten(theme.palette.primary.light, 0.4),
    overflow: 'hidden'
  },
  loadingBar: {
    height: progressBarHeight,
    borderRadius: progressBarRadius,
    backgroundColor: darken(theme.palette.primary.dark, 0.4),
    transition: 'width 0.5s'
  },
  details: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  fraction: {
    fontWeight: 'bold'
  },
  message: {
    color: theme.palette.primary.light
  }
}));

Using of Progress

 <Progress
        current={questionIdx + 1}
        total={questions.length}
      />