coderhood-ui/src/components/loaders/LoaderOrbiter.jsx

UI Library

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

function LoaderOrbiter({ size = 60, outerColor = '#ff69b4', innerColor = '#b000e8', active = true, rotationDuration = 1 }) {
  const outerStyle = {
      width: `${size}px`,
      height: `${size}px`,
      borderTopColor: outerColor,
      animationDuration: `${rotationDuration}s`,
  };

  const innerSize = size * 0.7;
  const innerStyle = {
      width: `${innerSize}px`,
      height: `${innerSize}px`,
      borderBottomColor: innerColor,
      animationDuration: `${rotationDuration * 1.5}s`,
  };

  return (
      <div className="orbit-wrapper" style={{ width: `${size}px`, height: `${size}px`, display: active ? 'flex' : 'none' }}>
          <div className="orbit-spinner" style={outerStyle}></div>
          <div className="orbit-inner-spinner" style={innerStyle}></div>
      </div>
  );
}

export default LoaderOrbiter