# ProgressBar

A component to visually represent the progress of an operation or task.

### **Import**
```tsx
import { ProgressBar } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { ProgressBar } from '../ProgressBar';

export const DefaultDemo = () => <ProgressBar value={50} />;
```

### **animated**
Enables or disables animation for the progress bar's changes.

- **Type:** `boolean`
- **Default:** `true`

```tsx
import React, { useState, useEffect } from 'react';
import { View, Animation } from 'app-studio';
import { ProgressBar } from '../ProgressBar';

export const AnimatedDemo = () => {
  const [progress, setProgress] = useState(20);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <View display="flex" flexDirection="column" gap={16} width="100%">
      <View>
        <ProgressBar
          value={progress}
          animated={true}
          animationDuration="0.8s"
          height={16}
          radius={8}
          color="color-blue-500"
          showLabel
        />
      </View>

      <View display="flex" gap={16}>
        <ProgressBar
          shape="circle"
          value={progress}
          animated={true}
          animationDuration="0.8s"
          showLabel
          size={60}
          color="color-purple-500"
        />
      </View>
    </View>
  );
};
```

### **Circular**

```tsx
import React from 'react';
import { View } from 'app-studio';
import { ProgressBar } from '../ProgressBar';

export const CircularDemo = () => (
  <View display="flex" gap={4}>
    <ProgressBar shape="circle" value={25} showLabel />
    <ProgressBar shape="circle" value={50} color="color-blue-500" showLabel />
    <ProgressBar
      shape="circle"
      value={75}
      color="color-green-500"
      size={80}
      strokeWidth={8}
      showLabel
    />
    <ProgressBar
      shape="circle"
      value={100}
      color="color-red-500"
      size={120}
      strokeWidth={12}
      showLabel
    />
  </View>
);
```

### **Index**

```tsx
export * from './default';
export * from './styles';
export * from './circular';
export * from './animated';
```

### **Styles**

```tsx
import React from 'react';
import { ProgressBar } from '../ProgressBar';

export const StyleDemo = () => (
  <ProgressBar value={70} color="color-green-500" height={12} radius={6} />
);
```