import React from 'react';

export const Default = () => {
  return (
    <>
      <div className="w-[40px] h-[40px] rounded-full border-[3px] border-transparent border-r-[#474bff] animate-spin" />
    </>
  );
};

import React from 'react';

export const TypeA = () => {
  return (
    <>
      <div className="border-t-transparent w-20 h-20 border-4 border-[#1a5cff] border-dotted rounded-full animate-spin" />
    </>
  );
};

import React from 'react';

export const TypeB = () => {
  return (
    <>
      <div className="border-t-transparent w-20 h-20 border-4 border-[#1a5cff] border-dashed rounded-full animate-spin" />
    </>
  );
};

import React from 'react';

export const TypeC = () => {
  return (
    <>
     <div className="border-t-transparent w-20 h-20 border-4 border-[#1a5cff] border-double rounded-full animate-spin" />
    </>
  );
};

import React from 'react';

export const TypeD = () => {
  return (
    <>
      <div className="w-20 h-20 border-l-2 border-[#1a5cff] rounded-full animate-spin" />
    </>
  );
};