@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/statusBar.md

@@ -0,0 +1,644 @@
+# StatusBar
+
+*Category:* Components
+*Section:* Progress
+*Source:* https://uikit.developers.rio.cloud/#components/statusBar
+*Captured:* 2025-12-12T12:38:33.113Z
+
+Flexible component to showcase various states based on progress bars.
+
+## StatusBar
+
+Usage: Use these components only on light backgrounds and limit the width of the wrapping element to avoid extreme long progress bars.
+
+### Example: Example 1
+
+V1
+Top label with icon left
+
+42 min resting
+
+V2
+Top label with icon right
+
+42 min resting
+
+V3
+Split whith icon left and label right
+
+1:45 h
+
+V4
+Split whith icon right and label left
+
+1:45 h
+
+V5
+Both icon and label left
+
+13 min
+
+V6
+Both icon and label right
+
+13 min
+
+V7
+Label left
+
+42 min
+
+V8
+Thin label right
+
+42 min
+
+V9
+Large progress with large icon left
+
+V10
+Large progress with large icon right
+
+V11
+Large progress with large icon and label
+
+44%
+
+V12
+Large progress only
+
+#### Summary
+
+V1
+Top label with icon left
+
+42 min resting
+
+V2
+Top label with icon right
+
+42 min resting
+
+V3
+Split whith icon left and label right
+
+1:45 h
+
+V4
+Split whith icon right and label left
+
+1:45 h
+
+V5
+Both icon and label left
+
+13 min
+
+V6
+Both icon and label right
+
+13 min
+
+V7
+Label left
+
+42 min
+
+V8
+Thin label right
+
+42 min
+
+V9
+Large progress with large icon left
+
+V10
+Large progress with large icon right
+
+V11
+Large progress with large icon and label
+
+44%
+
+V12
+Large progress only
+
+#### React (tsx)
+
+```tsx
+import StatusBar from '@rio-cloud/rio-uikit/StatusBar';
+
+const Headline = ({ headline, description }: { headline: string; description: string }) => (
+    <div className='display-flex-md align-items-baseline margin-bottom-10'>
+        <div className='text-size-16'>{headline}</div>
+        <div className='text-size-14 margin-left-10-md'>{description}</div>
+    </div>
+);
+
+export default () => (
+    <div>
+        <div className='row'>
+            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
+                <Headline headline='V1' description='Top label with icon left' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-status-resting', color: 'text-color-status-resting' }}
+                    label={{ value: '42 min resting', alignment: 'top', color: 'text-color-status-resting' }}
+                    progress={[
+                        { percentage: 30, color: 'progress-bar-status-resting', tooltip: <span>30%</span> },
+                        { percentage: 70, color: 'progress-bar-light', tooltip: <span>70%</span> },
+                    ]}
+                    className='MyProgress'
+                />
+            </div>
+
+            <div className='col-sm-6'>
+                <Headline headline='V2' description='Top label with icon right' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-status-resting', alignment: 'right', color: 'text-color-status-resting' }}
+                    label={{ value: '42 min resting', alignment: 'top', color: 'text-color-status-resting' }}
+                    progress={[
+                        { percentage: 30, color: 'progress-bar-status-resting', tooltip: <span>30%</span> },
+                        { percentage: 70, color: 'progress-bar-light', tooltip: <span>70%</span> },
+                    ]}
+                />
+            </div>
+        </div>
+
+        <hr className='margin-top-25 margin-bottom-25' />
+
+        <div className='row'>
+            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm'>
+                <Headline headline='V3' description='Split whith icon left and label right' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-status-driving', color: 'text-color-status-driving' }}
+                    label={{ value: '1:45 h', color: 'text-color-status-driving' }}
+                    progress={[
+                        { percentage: 85, color: 'progress-bar-status-driving', tooltip: <span>85%</span> },
+                        { percentage: 15, color: 'progress-bar-light', tooltip: <span>15%</span> },
+                    ]}
+                />
+            </div>
+
+            <div className='col-sm-6'>
+                <Headline headline='V4' description='Split whith icon right and label left' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-status-driving', alignment: 'right', color: 'text-color-status-driving' }}
+                    label={{ value: '1:45 h', alignment: 'left', color: 'text-color-status-driving' }}
+                    progress={[
+                        { percentage: 85, color: 'progress-bar-status-driving', tooltip: <span>85%</span> },
+                        { percentage: 15, color: 'progress-bar-light', tooltip: <span>15%</span> },
+                    ]}
+                />
+            </div>
+        </div>
+
+        <hr className='margin-top-25 margin-bottom-25' />
+
+        <div className='row'>
+            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
+                <Headline headline='V5' description='Both icon and label left' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-status-working', color: 'text-color-status-working' }}
+                    label={{ value: '13 min', alignment: 'left', color: 'text-color-status-working' }}
+                    progress={[
+                        { percentage: 15, color: 'progress-bar-status-working', tooltip: <span>15%</span> },
+                        { percentage: 85, color: 'progress-bar-light', tooltip: <span>85%</span> },
+                    ]}
+                />
+            </div>
+
+            <div className='col-sm-6'>
+                <Headline headline='V6' description='Both icon and label right' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-status-working', alignment: 'right', color: 'text-color-status-working' }}
+                    label={{ value: '13 min', alignment: 'right', color: 'text-color-status-working' }}
+                    progress={[
+                        { percentage: 15, color: 'progress-bar-status-working', tooltip: <span>15%</span> },
+                        { percentage: 85, color: 'progress-bar-light', tooltip: <span>85%</span> },
+                    ]}
+                />
+            </div>
+        </div>
+
+        <hr className='margin-top-25 margin-bottom-25' />
+
+        <div className='row'>
+            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
+                <Headline headline='V7' description='Label left' />
+
+                <StatusBar
+                    label={{ value: '42 min', alignment: 'left', color: 'text-color-status-available' }}
+                    progress={[
+                        { percentage: 55, color: 'progress-bar-status-available', tooltip: <span>55%</span> },
+                        { percentage: 45, color: 'progress-bar-light', tooltip: <span>45%</span> },
+                    ]}
+                />
+            </div>
+
+            <div className='col-sm-6'>
+                <Headline headline='V8' description='Thin label right' />
+
+                <StatusBar
+                    label={{ value: '42 min', weight: 'light', color: 'text-color-status-available' }}
+                    progress={[
+                        { percentage: 55, color: 'progress-bar-status-available', tooltip: <span>55%</span> },
+                        { percentage: 45, color: 'progress-bar-light', tooltip: <span>45%</span> },
+                    ]}
+                />
+            </div>
+        </div>
+
+        <hr className='margin-top-25 margin-bottom-25' />
+
+        <div className='row'>
+            <div className='col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs'>
+                <Headline headline='V9' description='Large progress with large icon left' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-user-sign', color: 'text-color-darker' }}
+                    progress={[
+                        { percentage: 15, color: 'progress-bar-rating-1' },
+                        { percentage: 25, color: 'progress-bar-rating-2' },
+                        { percentage: 20, color: 'progress-bar-rating-3' },
+                        { percentage: 30, color: 'progress-bar-rating-4' },
+                        { percentage: 10, color: 'progress-bar-rating-5' },
+                    ]}
+                    size='large'
+                />
+            </div>
+
+            <div className='col-sm-6'>
+                <Headline headline='V10' description='Large progress with large icon right' />
+
+                <StatusBar
+                    icon={{ name: 'rioglyph-user-sign', color: 'text-color-darker', alignment: 'right' }}
+                    progress={[
+                        { percentage: 15, color: 'progress-bar-rating-1' },
+                        { percentage: 25, color: 'progress-bar-rating-2' },
+                        { percentage: 20, color: 'progress-bar-rating-3' },
+                        { percentage: 30, color: 'progress-bar-rating-4' },
+                        { percentage: 10, color: 'progress-bar-rating-5' },
+                    ]}
+                    size='large'
+                />
+            </div>
+        </div>
+
+        <hr className='margin-top-25 margin-bottom-25' />
+
+        <Headline headline='V11' description='Large progress with large icon and label' />
+
+        <StatusBar
+            icon={{ name: 'rioglyph-status-working', color: 'text-color-status-working' }}
+            label={{ value: '44%', color: 'text-color-status-working' }}
+            progress={[{ percentage: 44, color: 'progress-bar-status-working', tooltip: <span>44%</span> }]}
+            size='large'
+            useProgressDivider={false}
+        />
+
+        <hr className='margin-top-25 margin-bottom-25' />
+
+        <Headline headline='V12' description='Large progress only' />
+
+        <StatusBar progress={[{ percentage: 25, color: 'progress-bar-info' }]} size='large' />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="row">
+        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V1</div>
+                <div class="text-size-14 margin-left-10-md">Top label with icon left</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-end MyProgress">
+                <div class="flex-order-1 margin-right-5">
+                    <span class="rioglyph rioglyph-status-resting text-color-status-resting text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10">
+                    <div class="display-flex justify-content-center">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold">42 min resting</span>
+                    </div>
+                    <div class="display-flex flex-1-0">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-resting progress-divider" style="width: 30%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 70%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V2</div>
+                <div class="text-size-14 margin-left-10-md">Top label with icon right</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-end">
+                <div class="flex-order-2 margin-left-5">
+                    <span class="rioglyph rioglyph-status-resting text-color-status-resting text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-1 flex-column margin-bottom-10">
+                    <div class="display-flex justify-content-center">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-resting width-0 text-size-16 text-bold">42 min resting</span>
+                    </div>
+                    <div class="display-flex flex-1-0">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-resting progress-divider" style="width: 30%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 70%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr class="margin-top-25 margin-bottom-25">
+    <div class="row">
+        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V3</div>
+                <div class="text-size-14 margin-left-10-md">Split whith icon left and label right</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="flex-order-1 margin-right-5">
+                    <span class="rioglyph rioglyph-status-driving text-color-status-driving text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-2 align-items-center">
+                    <div class="flex-order-2 margin-left-10">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold">1:45 h</span>
+                    </div>
+                    <div class="display-flex flex-1-0 flex-order-1">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-driving progress-divider" style="width: 85%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 15%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V4</div>
+                <div class="text-size-14 margin-left-10-md">Split whith icon right and label left</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="flex-order-2 margin-left-5">
+                    <span class="rioglyph rioglyph-status-driving text-color-status-driving text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-1 align-items-center">
+                    <div class="flex-order-1 margin-right-10">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-driving text-size-16 text-bold">1:45 h</span>
+                    </div>
+                    <div class="display-flex flex-1-0 flex-order-2">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-driving progress-divider" style="width: 85%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 15%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr class="margin-top-25 margin-bottom-25">
+    <div class="row">
+        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V5</div>
+                <div class="text-size-14 margin-left-10-md">Both icon and label left</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="flex-order-1 margin-right-5">
+                    <span class="rioglyph rioglyph-status-working text-color-status-working text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-2 align-items-center">
+                    <div class="flex-order-1 margin-right-10">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold">13 min</span>
+                    </div>
+                    <div class="display-flex flex-1-0 flex-order-2">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-working progress-divider" style="width: 15%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 85%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V6</div>
+                <div class="text-size-14 margin-left-10-md">Both icon and label right</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="flex-order-2 margin-left-5">
+                    <span class="rioglyph rioglyph-status-working text-color-status-working text-size-h3">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-1 align-items-center">
+                    <div class="flex-order-2 margin-left-10">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-16 text-bold">13 min</span>
+                    </div>
+                    <div class="display-flex flex-1-0 flex-order-1">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-working progress-divider" style="width: 15%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 85%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr class="margin-top-25 margin-bottom-25">
+    <div class="row">
+        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V7</div>
+                <div class="text-size-14 margin-left-10-md">Label left</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="display-flex flex-1-0 align-items-center">
+                    <div class="flex-order-1 margin-right-10">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16 text-bold">42 min</span>
+                    </div>
+                    <div class="display-flex flex-1-0 flex-order-2">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-available progress-divider" style="width: 55%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 45%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V8</div>
+                <div class="text-size-14 margin-left-10-md">Thin label right</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="display-flex flex-1-0 align-items-center">
+                    <div class="flex-order-2 margin-left-10">
+                        <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-available text-size-16">42 min</span>
+                    </div>
+                    <div class="display-flex flex-1-0 flex-order-1">
+                        <div class="progress margin-0 flex-1-0 height-5">
+                            <div class="progress-bar progress-bar-status-available progress-divider" style="width: 55%;">
+                            </div>
+                            <div class="progress-bar progress-bar-light progress-divider" style="width: 45%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr class="margin-top-25 margin-bottom-25">
+    <div class="row">
+        <div class="col-sm-6 margin-bottom-20 margin-bottom-0-sm-xs">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V9</div>
+                <div class="text-size-14 margin-left-10-md">Large progress with large icon left</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="flex-order-1 margin-right-5">
+                    <span class="rioglyph rioglyph-user-sign text-color-darker text-size-h2">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-2 align-items-center">
+                    <div class="display-flex flex-1-0">
+                        <div class="progress margin-0 flex-1-0 height-10">
+                            <div class="progress-bar progress-bar-rating-1 progress-divider" style="width: 15%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-2 progress-divider" style="width: 25%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-3 progress-divider" style="width: 20%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-4 progress-divider" style="width: 30%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-5 progress-divider" style="width: 10%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="display-flex-md align-items-baseline margin-bottom-10">
+                <div class="text-size-16">V10</div>
+                <div class="text-size-14 margin-left-10-md">Large progress with large icon right</div>
+            </div>
+            <div class="StatusBar width-100pct display-flex align-items-center">
+                <div class="flex-order-2 margin-left-5">
+                    <span class="rioglyph rioglyph-user-sign text-color-darker text-size-h2">
+                    </span>
+                </div>
+                <div class="display-flex flex-1-0 flex-order-1 align-items-center">
+                    <div class="display-flex flex-1-0">
+                        <div class="progress margin-0 flex-1-0 height-10">
+                            <div class="progress-bar progress-bar-rating-1 progress-divider" style="width: 15%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-2 progress-divider" style="width: 25%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-3 progress-divider" style="width: 20%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-4 progress-divider" style="width: 30%;">
+                            </div>
+                            <div class="progress-bar progress-bar-rating-5 progress-divider" style="width: 10%;">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr class="margin-top-25 margin-bottom-25">
+    <div class="display-flex-md align-items-baseline margin-bottom-10">
+        <div class="text-size-16">V11</div>
+        <div class="text-size-14 margin-left-10-md">Large progress with large icon and label</div>
+    </div>
+    <div class="StatusBar width-100pct display-flex align-items-center">
+        <div class="flex-order-1 margin-right-5">
+            <span class="rioglyph rioglyph-status-working text-color-status-working text-size-h2">
+            </span>
+        </div>
+        <div class="display-flex flex-1-0 flex-order-2 align-items-center">
+            <div class="flex-order-2 margin-left-10">
+                <span class="display-flex ellipsis-1 flex-1-0 justify-content-center text-color-status-working text-size-h3 text-bold">44%</span>
+            </div>
+            <div class="display-flex flex-1-0 flex-order-1">
+                <div class="progress margin-0 flex-1-0 height-10">
+                    <div class="progress-bar progress-bar-status-working" style="width: 44%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr class="margin-top-25 margin-bottom-25">
+    <div class="display-flex-md align-items-baseline margin-bottom-10">
+        <div class="text-size-16">V12</div>
+        <div class="text-size-14 margin-left-10-md">Large progress only</div>
+    </div>
+    <div class="StatusBar width-100pct display-flex align-items-center">
+        <div class="display-flex flex-1-0">
+            <div class="display-flex flex-1-0">
+                <div class="progress margin-0 flex-1-0 height-10">
+                    <div class="progress-bar progress-bar-info progress-divider" style="width: 25%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | Object | — | The icon to be shown next to the progress bar. |
+| └name | String | — | The class name of the icon i.e. "rioglyph-cruise-control". |
+| └alignment | String | 'left' | The position of the icon. Possible values are: left or right |
+| └color | String | 'text-color-gray' | The text color class name for the icon. |
+| └className | String | — | Optional class names for the icon. |
+| label | Object | — | The label to be shown for the progress bar. |
+| └value | String / Node | — | The label content. |
+| └alignment | String | 'right' | The position of the icon. Possible values are: left top right |
+| └weight | String | 'bold' | The text weight of the label. Possible values are: light or bold |
+| └color | String | 'text-color-gray' | The text color class name for the label. |
+| └className | String | — | Optional class names for the label. |
+| progress | list of Objects | — | List of progress bars which will be stacked in given order if there are multiple. |
+| └percentage | Number | 0 | The percentage of the progress. |
+| └color | String | 'progress-bar-info' | The color class name for the label. |
+| └tooltip | String / Node | — | Optional tooltip content to be shown for the progress bar. |
+| └tooltipPosition | String | 'top' | The position of the tooltip for the progress bar. Possible values are: top bottom left right |
+| └tooltipDelay | Number | 50 | The delay in milliseconds for when the tooltip is shown when hovering the progress bar. |
+| └className | String | — | Optional class names for the progress bar. |
+| size | String | 'small' | The size of the icon and progress bar. Possible values are: small or large |
+| useProgressDivider | Boolean | true | Uses a divider for multiple progress bars when defined. |
+| className | String | — | Optional class names for the wrapper element. |