# Progress-Indicator - Code
> Code examples and API documentation for the ix-progress-indicator
# Progress-Indicator - Code
## Linear
### React Examples
#### progress-indicator.tsx
```tsx
import { IxProgressIndicator } from '@siemens/ix-react';
import './progress-indicator.scoped.css';
export default () => {
return (
75%
);
};
```
#### progress-indicator.scoped.css
```css
.example-header {
margin: 0.7rem 0;
}
```
### Angular Examples
#### progress-indicator.ts
```ts
import { Component } from '@angular/core';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './progress-indicator.html',
})
export default class ProgressIndicator {}
```
#### progress-indicator.html
```html
75%
```
#### progress-indicator.css
```css
.example-header {
margin: 0.7rem 0;
}
```
### Angular Standalone Examples
#### progress-indicator.ts
```ts
import { Component } from '@angular/core';
import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
@Component({
selector: 'app-example',
templateUrl: './progress-indicator.html',
styleUrl: './progress-indicator.css',
imports: [IxProgressIndicator],
})
export default class ProgressIndicator {}
```
#### progress-indicator.html
```html
75%
```
#### progress-indicator.css
```css
.example-header {
margin: 0.7rem 0;
}
```
### Vue Examples
#### progress-indicator.vue
```vue
75%
```
#### progress-indicator.css
```css
.example-header {
margin: 0.7rem 0;
}
```
## Circular
### React Examples
#### progress-indicator-circular.tsx
```tsx
import { IxProgressIndicator } from '@siemens/ix-react';
import './progress-indicator.scoped.css';
export default () => {
return (
75%
);
};
```
### Angular Examples
#### progress-indicator-circular.ts
```ts
import { Component } from '@angular/core';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './progress-indicator-circular.html',
})
export default class ProgressIndicatorCircular {}
```
#### progress-indicator-circular.html
```html
Popover news example
75%
```
### Angular Standalone Examples
#### progress-indicator-circular.ts
```ts
import { Component } from '@angular/core';
import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
@Component({
selector: 'app-example',
templateUrl: './progress-indicator-circular.html',
styleUrl: './progress-indicator.css',
imports: [IxProgressIndicator],
})
export default class ProgressIndicatorCircular {}
```
#### progress-indicator-circular.html
```html
Popover news example
75%
```
### Vue Examples
#### progress-indicator-circular.vue
```vue
75%
```
## Linear status
### React Examples
#### progress-indicator-linear-status.tsx
```tsx
import { IxProgressIndicator } from '@siemens/ix-react';
import './progress-indicator.scoped.css';
export default () => {
return (
<>
Status - Default
75%
Status - Success
75%
Status - Error
75%
Status - Info
75%
Status - Warning
75%
Status - Paused
75%
);
};
```
### Angular Examples
#### progress-indicator-linear-status.ts
```ts
import { Component } from '@angular/core';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './progress-indicator-linear-status.html',
})
export default class ProgressIndicatorLinearStatus {}
```
#### progress-indicator-linear-status.html
```html
Popover news example
75%
75%
75%
75%
75%
75%
```
### Angular Standalone Examples
#### progress-indicator-linear-status.ts
```ts
import { Component } from '@angular/core';
import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
@Component({
selector: 'app-example',
templateUrl: './progress-indicator-linear-status.html',
styleUrl: './progress-indicator.css',
imports: [IxProgressIndicator],
})
export default class ProgressIndicatorLinearStatus {}
```
#### progress-indicator-linear-status.html
```html
Popover news example
75%
75%
75%
75%
75%
75%
```
### Vue Examples
#### progress-indicator-linear-status.vue
```vue
75%
75%
75%
75%
75%
75%
```
## Linear sizes
### React Examples
#### progress-indicator-linear-sizes.tsx
```tsx
import { IxProgressIndicator } from '@siemens/ix-react';
import './progress-indicator.scoped.css';
export default () => {
return (
<>
Size - XS
75%
Size - SM
75%
Size - MD
75%
Size - LG
75%
Size - XL
75%
);
};
```
### Angular Examples
#### progress-indicator-linear-sizes.ts
```ts
import { Component } from '@angular/core';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './progress-indicator-linear-sizes.html',
})
export default class ProgressIndicatorLinearSizes {}
```
#### progress-indicator-linear-sizes.html
```html
Popover news example
75%
75%
75%
75%
75%
```
### Angular Standalone Examples
#### progress-indicator-linear-sizes.ts
```ts
import { Component } from '@angular/core';
import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
@Component({
selector: 'app-example',
templateUrl: './progress-indicator-linear-sizes.html',
styleUrl: './progress-indicator.css',
imports: [IxProgressIndicator],
})
export default class ProgressIndicatorLinearSizes {}
```
#### progress-indicator-linear-sizes.html
```html
Popover news example
75%
75%
75%
75%
75%
```
### Vue Examples
#### progress-indicator-linear-sizes.vue
```vue
75%
75%
75%
75%
75%
```
## Circular status
### React Examples
#### progress-indicator-circular-status.tsx
```tsx
import { IxProgressIndicator } from '@siemens/ix-react';
import './progress-indicator.scoped.css';
export default () => {
return (
<>
Status - Default
75%
Status - Success
75%
Status - Error
75%
Status - Info
75%
Status - Warning
75%
Status - Paused
75%
);
};
```
### Angular Examples
#### progress-indicator-circular-status.ts
```ts
import { Component } from '@angular/core';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './progress-indicator-circular-status.html',
})
export default class ProgressIndicatorCircularStatus {}
```
#### progress-indicator-circular-status.html
```html
Popover news example
75%
75%
75%
75%
75%
75%
```
### Angular Standalone Examples
#### progress-indicator-circular-status.ts
```ts
import { Component } from '@angular/core';
import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
@Component({
selector: 'app-example',
templateUrl: './progress-indicator-circular-status.html',
styleUrl: './progress-indicator.css',
imports: [IxProgressIndicator],
})
export default class ProgressIndicatorCircularStatus {}
```
#### progress-indicator-circular-status.html
```html
Popover news example
75%
75%
75%
75%
75%
75%
```
### Vue Examples
#### progress-indicator-circular-status.vue
```vue
75%
75%
75%
75%
75%
75%
```
## Circular sizes
### React Examples
#### progress-indicator-circular-sizes.tsx
```tsx
import { IxProgressIndicator } from '@siemens/ix-react';
import './progress-indicator.scoped.css';
export default () => {
return (
<>
Size - XS
75%
Size - SM
75%
Size - MD
75%
Size - LG
75%
Size - XL
75%
);
};
```
### Angular Examples
#### progress-indicator-circular-sizes.ts
```ts
import { Component } from '@angular/core';
@Component({
standalone: false,
selector: 'app-example',
templateUrl: './progress-indicator-circular-sizes.html',
})
export default class ProgressIndicatorCircularSizes {}
```
#### progress-indicator-circular-sizes.html
```html
Popover news example
75%
75%
75%
75%
75%
```
### Angular Standalone Examples
#### progress-indicator-circular-sizes.ts
```ts
import { Component } from '@angular/core';
import { IxProgressIndicator } from '@siemens/ix-angular/standalone';
@Component({
selector: 'app-example',
templateUrl: './progress-indicator-circular-sizes.html',
styleUrl: './progress-indicator.css',
imports: [IxProgressIndicator],
})
export default class ProgressIndicatorCircularSizes {}
```
#### progress-indicator-circular-sizes.html
```html
Popover news example
75%
75%
75%
75%
75%
```
### Vue Examples
#### progress-indicator-circular-sizes.vue
```vue
75%
75%
75%
75%
75%
```
## API for ix-progress-indicator
### Properties
| Name | Description | Attribute | Type | Default |
| --- | --- | --- | --- | --- |
| helperText | { "The helper text for the progress indicator." } | helper-text | string \| undefined | |
| label | { "The label for the progress indicator." } | label | string \| undefined | |
| max | { "The maximum value of the progress indicator." } | max | number | 100 |
| min | { "The minimum value of the progress indicator." } | min | number | 0 |
| showTextAsTooltip | { "Show the helper text as a tooltip" } | show-text-as-tooltip | boolean | false |
| size | { "The size of the progress indicator." } | size | "lg" \| "md" \| "sm" \| "xl" \| "xs" | 'md' |
| status | { "The state of the progress indicator.\n\nThis is used to indicate the current state of the progress indicator." } | status | "default" \| "error" \| "info" \| "paused" \| "success" \| "warning" | 'default' |
| textAlignment | { "The text alignment for the helper text.\n\nCan be 'left', 'center', or 'right'." } | text-alignment | "center" \| "left" \| "right" | 'left' |
| type | { "The type of progress indicator to use." } | type | "circular" \| "linear" | 'linear' |
| value | { "The value of the progress indicator." } | value | number | 0 |
### Slot
| Name | Description |
| --- | --- |
| default | { "Content displayed with the progress indicator." } |
| helper-text | { "Custom helper text content." } |