Progress

Color

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<progress class="progress" value="50" max="100" />
	<progress class="progress bw" value="50" max="100" />
	<progress class="progress info" value="50" max="100" />
	<progress class="progress warn" value="50" max="100" />
	<progress class="progress success" value="50" max="100" />
	<progress class="progress danger" value="50" max="100" />
</div>

<div className='grid gap-4'>
  <progress className='progress'
    value='50'
    max='100' />
  <progress className='progress bw'
    value='50'
    max='100' />
  <progress className='progress info'
    value='50'
    max='100' />
  <progress className='progress warn'
    value='50'
    max='100' />
  <progress className='progress success'
    value='50'
    max='100' />
  <progress className='progress danger'
    value='50'
    max='100' />
</div>

Colored

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<progress class="progress colored" value="50" max="100" />
	<progress class="progress colored bw" value="50" max="100" />
	<progress class="progress colored info" value="50" max="100" />
	<progress class="progress colored warn" value="50" max="100" />
	<progress class="progress colored success" value="50" max="100" />
	<progress class="progress colored danger" value="50" max="100" />
</div>

<div className='grid gap-4'>
  <progress className='progress colored'
    value='50'
    max='100' />
  <progress className='progress colored bw'
    value='50'
    max='100' />
  <progress className='progress colored info'
    value='50'
    max='100' />
  <progress className='progress colored warn'
    value='50'
    max='100' />
  <progress className='progress colored success'
    value='50'
    max='100' />
  <progress className='progress colored danger'
    value='50'
    max='100' />
</div>

Size

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<progress class="progress colored warn xs" value="50" max="100" />
	<progress class="progress colored warn sm" value="50" max="100" />
	<progress class="progress colored warn md" value="50" max="100" />
	<progress class="progress colored warn lg" value="50" max="100" />
	<progress class="progress colored warn xl" value="50" max="100" />
</div>

<div className='grid gap-4'>
  <progress className='progress colored warn xs'
    value='50'
    max='100' />
  <progress className='progress colored warn sm'
    value='50'
    max='100' />
  <progress className='progress colored warn md'
    value='50'
    max='100' />
  <progress className='progress colored warn lg'
    value='50'
    max='100' />
  <progress className='progress colored warn xl'
    value='50'
    max='100' />
</div>

Indeterminate

Preview

Code

HTML

Code

JSX/TSX

<div class="grid gap-4">
	<div class="progress indeterminate colored success" />
	<div class="progress indeterminate colored info" />
	<div class="progress indeterminate colored danger" />
</div>

<div className='grid gap-4'>
  <div className='progress indeterminate colored success' />
  <div className='progress indeterminate colored info' />
  <div className='progress indeterminate colored danger' />
</div>

Popover Skeleton