CircularProgress

import React from 'react';
import { CircularProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <CircularProgress />
    </div>
  );
}

import React from 'react';
import { CircularProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-wrap items-center justify-center gap-2'>
      <CircularProgress color='default' />
      <CircularProgress color='primary' />
      <CircularProgress color='secondary' />
      <CircularProgress color='info' />
      <CircularProgress color='warning' />
      <CircularProgress color='success' />
      <CircularProgress color='error' />
    </div>
  );
}

import React from 'react';
import { CircularProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <CircularProgress variant='indeterminate' color='primary' />
    </div>
  );
}

"use client"
 
import React, { useEffect, useState } from 'react'
import { CircularProgress } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [progress, setProgress] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
    }, 800)
  
    return () => {
      clearInterval(timer)
    }
  }, []);
 
  return (
    <div className='flex items-center justify-center gap-2'>
      <CircularProgress variant='determinate' color='primary' value={25} />
      <CircularProgress variant='determinate' color='primary' value={50} />
      <CircularProgress variant='determinate' color='primary' value={75} />
      <CircularProgress variant='determinate' color='primary' value={100} />
      <CircularProgress variant='determinate' color='primary' value={progress} />
    </div>
  );
}

"use client"
 
import React, { useEffect, useState } from 'react'
import { CircularProgress, Typography } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [progress, setProgress] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
    }, 800)
  
    return () => {
      clearInterval(timer)
    }
  }, []);
 
  return (
    <div className='relative inline-flex items-center justify-center'>
      <CircularProgress variant='determinate' value={progress} color='primary' />
      <div className='absolute top-0 left-0 bottom-0 right-0 flex items-center justify-center'>
        <Typography variant='body2'>{`${Math.round(progress)}%`}</Typography>
      </div>
    </div>
  );
}

import React from 'react';
import { CircularProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <CircularProgress size='lg' color='primary' />
      <CircularProgress size='md' color='primary' />
      <CircularProgress size='sm' color='primary' />
    </div>
  );
}