Feedback

Progress

Visual status indicator for tasks and processes.

Linear Progress

Standard bar progress for indicating completion of linear tasks.

Progress45%
'use client'

import React from 'react'
import { Progress, Stack } from 'biibaos'

export default function LinearProgressDemo() {
  return (
    <Stack direction="column" gap={24} style={{ width: '100%' }}>
      <Progress value={45} showValue size="sm" />
      <Progress value={75} variant="success" size="md" />
      <Progress value={30} variant="danger" size="lg" />
    </Stack>
  )
}

Circular Progress

A premium circular indicator with configurable size and stroke thickness. Ideal for dashboard widgets and loading states.

45%
85%
30%
'use client'

import React from 'react'
import { Progress, Stack } from 'biibaos'

export default function CircularProgressDemo() {
  return (
    <Stack direction="row" gap={32} align="center" justify="center" wrap style={{ width: '100%' }}>
      <Progress type="circular" value={65} size="sm" showValue />
      <Progress type="circular" value={45} size="md" showValue />
      <Progress type="circular" value={85} size="lg" showValue />
      <Progress type="circular" value={30} circularSize={100} thickness={10} variant="warning" showValue />
    </Stack>
  )
}

Properties

PropTypeDefaultDescription
valuenumber // 0-100—Raw data string or URL to encode into the QR grid
maxnumber100Maximum numerical selectable bound
showValuebooleanfalseIf true, prints percentage label text
variant'default' | 'success' | 'warning' | 'danger''default'Semantic design theme variant
size'sm' | 'md' | 'lg''md'Predefined size scaling preset
type'linear' | 'circular''linear'Semantic HTML input type classification (text, password, email, etc.)
thicknessnumber—Stroke height of the divider line in pixels
circularSizenumber—Configures the circularSize option

Previous

Carousel

Next

Status Page