# Progress bar The component is used to display progress visually. It helps indicate completion status in a clear and customizable way. ## About The **Progress** provides flexible options for styling, orientation, and labeling. It supports both horizontal and vertical layouts, with customizable thickness, rounded corners, and additional styling classes. The progress value is determined by the `start` and `end` props, and labels can be displayed in different styles. ## Example The following example shows a simple progress bar with a set start and end value, along with a label: ```html ``` The `end` prop define the end limit of the progress. The `start` is **0** default. ## Progress Range The `start` and `end` props define the progress range. The `start` prop sets the initial value, while the `end` prop sets the final value of the progress bar. By default, both values are `0`, which is the minimum value. The maximum value is `100`. - If `start` and `end` are equal, the progress bar will appear empty. Only the label will be display (if available). - If `start` is greater than `end`, they will swap their values to work properly. - If `end` is greater than `start` (which is expected), the progress bar will fill accordingly. - If `end` exceeds the maximum range (100), it will be considered as 100. ```html ``` ## Thickness The `thickness` prop controls the thickness of the progress bar. It accepts five values: `'px'`, `'sm'`, `'md'`, `'lg'`, and `'xl'`. The default value is `'md'`. > **Note:** If the `thickness` is set to `'lg'` or `'xl'`, the label will always be displayed inline, regardless of the `labelVariant` setting. ```html ``` ## Label The `label` prop defines the text displayed on the Progress bar, which can represent progress values or any custom text. By default, no label is shown unless explicitly set. The `labelVariant` prop controls the appearance of the label. When set to `"inline"`, the label appears as inline text. When set to `"bubble"`, the label is enclosed within a bubble for better visibility. The default value for this prop is `"bubble"`. ```html ``` > **Note:** Regardless of the `labelVariant` setting, if the `thickness` is `'lg'` or `'xl'`, the label will automatically be displayed inline. Otherwise, it will follow the specified `labelVariant` value. More in the thickness section. ## Vertical Progress You can add a vertical progress bar by jus adding the `vertical` attribute to the `Progress`. ```html ``` ## Dynamic Progress You can update the progress bar with dynamically by making it reactive. The example given below. ```html ``` ## Customization The progress bar is fully customizable. Use the `barClasses` prop to apply custom styles to the progress bar, and the `bubbleClasses` prop to customize the bubble label. The `rounded` prop controls the border radius of the progress bar. To further customize the progress bar track, apply classes directly to the `Progress` component using the `class` attribute. ```html ``` Anything else you pass reaches the element itself, so an `id`, a `title`, a `data-*` attribute or an event handler all work the way they would on a `
`. ## Accessibility The Progress component sets the ARIA value attributes itself. Two things are left to you: - **ARIA attributes**: The component automatically uses `role="progressbar"`, `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` to communicate the current progress and its range to screen readers. - **Color contrast**: Ensure sufficient color contrast to make the progress bar readable for users with visual impairments. - **Label visibility**: The `"bubble"` label sits above the bar, so leave room for it or it will cover whatever is directly above. ## Configuration ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `start` | number | `0` | The starting value of the progress bar. It defines the initial state of the progress. Recommended value: 0-100. | | `end` | number | `0` | The ending value of the progress bar. It defines the final state of the progress. Recommended value: 0-100. | | `label` | string | `undefined` | The label text to display on the progress bar. | | `labelVariant` | 'inline' \| 'bubble' | `bubble` | Controls the appearance of the label. 'inline' displays the label inline, inside the progress bar, while 'bubble' displays it in a bubble format. With 'lg' or 'xl' thickness, the label is always inline. | | `bubbleClasses` | string | `null` | Custom classes to style the bubble label when 'labelVariant' is set to 'bubble'. | | `thickness` | 'px' \| 'sm' \| 'md' \| 'lg' \| 'xl' | `md` | Determines the thickness of the progress bar. 'px' is the thinnest, and 'xl' is the thickest. | | `barClasses` | string | `` | Custom classes to apply to the progress bar itself. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `full` | Controls the rounded corners of the progress bar. This helps maintain design consistency. | | `id` | string | `` | A unique identifier for the progress bar. If not provided, a unique ID is generated. | ### Dynamic props | Name | Description | | --- | --- | | `vertical` | When set, the progress bar will be displayed vertically. Otherwise, it will be horizontal. | --- Category: Components Keywords: progress-bar, progress, indicator, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt