glide-design-system/src/lib/components/loader/ProgressCircle.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from 'react'
import './progress.css'

export const ProgressCircle = ({
  color,
  size,
  style,
  className,
  containerClass,
}) => {
  const combinedStyle = {
    color: color,
    width: size === 'small' ? '20px' : size === 'large' ? '40px' : '30px',
    height: size === 'small' ? '20px' : size === 'large' ? '40px' : '30px',
    ...style,
    borderTopColor: '#ffffff !important',
  }
  return (
    <div
      className={`circularProgressContainer ${
        containerClass ? containerClass : ''
      }`}
    >
      <div
        className={`circularProgress ${className ? className : ''}`}
        style={combinedStyle}
      ></div>
    </div>
  )
}