LinearProgress

import React from 'react';
import { LinearProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <LinearProgress />
  );
}

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

import React from 'react';
import { LinearProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <LinearProgress variant='indeterminate' />
  );
}

"use client"
 
import React, { useEffect, useState } from 'react'
import { LinearProgress, Typography } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [progress, setProgress] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 0;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100)
      })
    }, 500);
  
    return () => {
      clearInterval(timer)
    }
  }, [])
 
  return (
    <div className='flex flex-col gap-2'>
      <div className='flex items-center justify-center gap-2'>
        <LinearProgress variant='determinate' value={progress} />
        <Typography>{`${Math.round(progress)}%`}</Typography>
      </div>
      <div className='flex items-center justify-center gap-2'>
        <LinearProgress color='secondary' variant='determinate' value={50} />
        <Typography>50%</Typography>
      </div>
    </div>
  );
}

"use client"
 
import React, { useEffect, useState } from 'react'
import { LinearProgress, Typography } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [progress, setProgress] = useState(0);
  const [buffer, setBuffer] = useState(10);
 
  const progressRef = React.useRef(() => {});
 
  useEffect(() => {
    progressRef.current = () => {
      if (progress === 100) {
        setProgress(0);
        setBuffer(10);
      }
      else {
        setProgress(progress + 1);
        if (buffer < 100 && progress % 5 === 0) {
          const newBuffer = buffer + 1 + Math.random() * 10;
          setBuffer(newBuffer > 100 ? 100 : newBuffer);
        }
      }
    }
  });
 
  useEffect(() => {
    const timer = setInterval(() => {
      progressRef.current();
    }, 200);
  
    return () => {
      clearInterval(timer)
    }
  }, [])
 
  return (
    <div className='flex flex-col gap-2'>
      <div className='flex items-center justify-center gap-2'>
        <LinearProgress variant='buffer' value={progress} bufferValue={buffer} />
        <Typography>{`${Math.round(progress)}%`}</Typography>
      </div>
      <div className='flex items-center justify-center gap-2'>
        <LinearProgress color='secondary' variant='buffer' value={50} bufferValue={60} />
        <Typography>50%</Typography>
      </div>
    </div>
  );
}

import React from 'react';
import { LinearProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    return (
      <LinearProgress variant='query' />
    );
  );
}

import React from 'react';
import { LinearProgress } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col gap-2'>
      <LinearProgress variant='buffer' size='sm' value={50} bufferValue={55} color='success' />
      <LinearProgress variant='buffer' size='md' value={50} bufferValue={55} color='success' />
      <LinearProgress variant='buffer' size='lg' value={50} bufferValue={55} color='success' />
    </div>
  );
}