# Progress cards

*Category:* Templates
*Section:* Progress
*Source:* https://uikit.developers.rio.cloud/#/templates/progress-cards
*Captured:* 2026-04-27T14:59:26.400Z

## Progress cards

### Example: 12% more than last week

Weekly report
Orders processed

80%

12% more than last week

Open rate

3.1%

3.1% more than last week

Error rate

2.01%

2.01% more than last week

#### React (tsx)

```tsx
import { FormattedNumber } from 'react-intl';

import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';

export default () => (
    <div className='margin-25-md'>
        <div className='margin-auto max-width-600'>
            <div className='display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default'>
                <div className='text-bold text-size-16 text-color-darker'>Weekly report</div>
                <StatsWidget className='border-none'>
                    <div className='display-flex justify-content-between gap-5'>
                        <div className='display-flex align-items-center'>
                            <div className='margin-right-3 text-color-darker text-medium'>Orders processed</div>
                        </div>
                        <span className='display-flex align-items-center gap-3 text-color-success'>
                            <span className='rioglyph rioglyph-arrow-up' />
                            <FormattedNumber value={80} style='unit' unit='percent' />
                        </span>
                    </div>
                    <div className='progress margin-y-5'>
                        <div className='progress-bar bg-info' style={{ width: `${80}%` }} />
                    </div>
                    <div className='text-color-dark text-size-12'>12% more than last week</div>
                </StatsWidget>
                <StatsWidget className='border-none'>
                    <div className='display-flex justify-content-between gap-5'>
                        <div className='display-flex align-items-center'>
                            <div className='margin-right-3 text-color-darker text-medium'>Open rate</div>
                        </div>
                        <span className='display-flex align-items-center gap-3 text-color-success'>
                            <span className='rioglyph rioglyph-arrow-up' />
                            <FormattedNumber value={3.1} style='unit' unit='percent' />
                        </span>
                    </div>
                    <div className='progress margin-y-5'>
                        <div className='progress-bar bg-info' style={{ width: `${74}%` }} />
                    </div>
                    <div className='text-color-dark text-size-12'>3.1% more than last week</div>
                </StatsWidget>
                <StatsWidget className='border-none'>
                    <div className='display-flex justify-content-between gap-5'>
                        <div className='display-flex align-items-center'>
                            <div className='margin-right-3 text-color-darker text-medium'>Error rate</div>
                        </div>
                        <span className='display-flex align-items-center gap-3 text-color-danger'>
                            <span className='rioglyph rioglyph-arrow-up' />
                            <FormattedNumber value={2.01} style='unit' unit='percent' />
                        </span>
                    </div>
                    <div className='progress margin-y-5'>
                        <div className='progress-bar bg-info' style={{ width: `${37}%` }} />
                    </div>
                    <div className='text-color-dark text-size-12'>2.01% more than last week</div>
                </StatsWidget>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="margin-auto max-width-600">
        <div class="display-flex flex-column gap-20 border rounded padding-20 bg-white shadow-default">
            <div class="text-bold text-size-16 text-color-darker">Weekly report</div>
            <div class="StatsWidget border-none">
                <div class="display-flex justify-content-between gap-5">
                    <div class="display-flex align-items-center">
                        <div class="margin-right-3 text-color-darker text-medium">Orders processed</div>
                    </div>
                    <span class="display-flex align-items-center gap-3 text-color-success">
                        <span class="rioglyph rioglyph-arrow-up">
                        </span>80%</span>
                </div>
                <div class="progress margin-y-5">
                    <div class="progress-bar bg-info" style="width: 80%;">
                    </div>
                </div>
                <div class="text-color-dark text-size-12">12% more than last week</div>
            </div>
            <div class="StatsWidget border-none">
                <div class="display-flex justify-content-between gap-5">
                    <div class="display-flex align-items-center">
                        <div class="margin-right-3 text-color-darker text-medium">Open rate</div>
                    </div>
                    <span class="display-flex align-items-center gap-3 text-color-success">
                        <span class="rioglyph rioglyph-arrow-up">
                        </span>3.1%</span>
                </div>
                <div class="progress margin-y-5">
                    <div class="progress-bar bg-info" style="width: 74%;">
                    </div>
                </div>
                <div class="text-color-dark text-size-12">3.1% more than last week</div>
            </div>
            <div class="StatsWidget border-none">
                <div class="display-flex justify-content-between gap-5">
                    <div class="display-flex align-items-center">
                        <div class="margin-right-3 text-color-darker text-medium">Error rate</div>
                    </div>
                    <span class="display-flex align-items-center gap-3 text-color-danger">
                        <span class="rioglyph rioglyph-arrow-up">
                        </span>2.01%</span>
                </div>
                <div class="progress margin-y-5">
                    <div class="progress-bar bg-info" style="width: 37%;">
                    </div>
                </div>
                <div class="text-color-dark text-size-12">2.01% more than last week</div>
            </div>
        </div>
    </div>
</div>
```

### Example: Example 2

Shipment volume by region

Region Shipments

Germany 3,550

France 1,798

Italy 1,245

Poland 986

Netherlands 854

Austria 650

Switzerland 420

#### React (tsx)

```tsx
import { FormattedNumber } from 'react-intl';

import Button from '@rio-cloud/rio-uikit/Button';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';

export default () => (
    <div className='margin-25-md'>
        <div className='margin-auto max-width-500'>
            <div className='panel panel-default shadow-default'>
                <div className='panel-heading display-flex gap-20 justify-content-between align-items-center'>
                    <div className='text-size-16 text-medium text-color-darkest'>Shipment volume by region</div>
                    <div>
                        <SimpleTooltip content='Share data' placement='bottom'>
                            <Button bsStyle='muted' iconName='rioglyph-share-alt' iconOnly />
                        </SimpleTooltip>
                    </div>
                </div>
                <div className='panel-body padding-0'>
                    <table className='table table-head-filled table-bottom-rounded'>
                        <colgroup>
                            <col className='width-150 width-100-xs' />
                            <col className='width-80 width-60-xs' />
                            <col />
                        </colgroup>
                        <thead>
                            <tr>
                                <th>Region</th>
                                <th colSpan={2}>Shipments</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Germany</td>
                                <td>
                                    <FormattedNumber value={3_550} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '71%' }} />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>France</td>
                                <td>
                                    <FormattedNumber value={1_798} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '35.96%' }} />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Italy</td>
                                <td>
                                    <FormattedNumber value={1_245} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '24.9%' }} />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Poland</td>
                                <td>
                                    <FormattedNumber value={986} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '19.72%' }} />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Netherlands</td>
                                <td>
                                    <FormattedNumber value={854} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '17.08%' }} />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Austria</td>
                                <td>
                                    <FormattedNumber value={650} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '13%' }} />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Switzerland</td>
                                <td>
                                    <FormattedNumber value={420} />
                                </td>
                                <td>
                                    <div className='progress progress-xs'>
                                        <div className='progress-bar bg-primary' style={{ width: '8.4%' }} />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="margin-auto max-width-500">
        <div class="panel panel-default shadow-default">
            <div class="panel-heading display-flex gap-20 justify-content-between align-items-center">
                <div class="text-size-16 text-medium text-color-darkest">Shipment volume by region</div>
                <div>
                    <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-share-alt">
                        </span>
                    </button>
                </div>
            </div>
            <div class="panel-body padding-0">
                <table class="table table-head-filled table-bottom-rounded">
                    <colgroup>
                        <col class="width-150 width-100-xs">
                        <col class="width-80 width-60-xs">
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>Region</th>
                            <th colspan="2">Shipments</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Germany</td>
                            <td>3,550</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 71%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>France</td>
                            <td>1,798</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 35.96%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Italy</td>
                            <td>1,245</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 24.9%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Poland</td>
                            <td>986</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 19.72%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Netherlands</td>
                            <td>854</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 17.08%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Austria</td>
                            <td>650</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 13%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Switzerland</td>
                            <td>420</td>
                            <td>
                                <div class="progress progress-xs">
                                    <div class="progress-bar bg-primary" style="width: 8.4%;">
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
```

### Example: Progress

Progress
Send reminder
56
Participants

Signed
12

Waiting signature
17

Manager review
22

Self review
5

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';

export default () => (
    <div className='margin-25-md'>
        <div className='margin-auto max-width-500'>
            <div className='padding-20 bg-white rounded shadow-muted'>
                <div className='display-flex justify-content-between align-items-start margin-bottom-10'>
                    <h3 className='text-color-darkest margin-0'>Progress</h3>
                    <Button variant='link' iconName='rioglyph-time-alt'>
                        Send reminder
                    </Button>
                </div>

                <div className='display-flex align-items-end gap-5 margin-bottom-15'>
                    <div className='text-size-h1 text-bold text-color-darkest'>56</div>
                    <div className='text-color-dark line-height-h1'>Participants</div>
                </div>

                <div className='progress margin-bottom-20'>
                    <div className='progress-bar progress-divider bg-info' style={{ width: '21%' }} />
                    <div className='progress-bar progress-divider bg-spectrum-indigo' style={{ width: '30%' }} />
                    <div className='progress-bar progress-divider bg-warning' style={{ width: '39%' }} />
                    <div className='progress-bar progress-divider bg-gray' style={{ width: '10%' }} />
                </div>

                <div className='display-flex justify-content-between row-gap-10 flex-wrap text-color-darker'>
                    <LabeledElement label='Signed' noGap>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='bg-info rounded-circle height-10 aspect-ratio-1' />
                            <span className='text-bold'>12</span>
                        </div>
                    </LabeledElement>
                    <LabeledElement label='Waiting signature' noGap>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1' />
                            <span className='text-bold'>17</span>
                        </div>
                    </LabeledElement>
                    <LabeledElement label='Manager review' noGap>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='bg-warning rounded-circle height-10 aspect-ratio-1' />
                            <span className='text-bold'>22</span>
                        </div>
                    </LabeledElement>
                    <LabeledElement label='Self review' noGap>
                        <div className='display-flex align-items-center gap-5'>
                            <span className='bg-gray rounded-circle height-10 aspect-ratio-1' />
                            <span className='text-bold'>5</span>
                        </div>
                    </LabeledElement>
                </div>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="margin-25-md">
    <div class="margin-auto max-width-500">
        <div class="padding-20 bg-white rounded shadow-muted">
            <div class="display-flex justify-content-between align-items-start margin-bottom-10">
                <h3 class="text-color-darkest margin-0">Progress</h3>
                <button type="button" class="btn btn-default btn-link btn-component" tabindex="0">
                    <span class="rioglyph rioglyph-time-alt">
                    </span>Send reminder</button>
            </div>
            <div class="display-flex align-items-end gap-5 margin-bottom-15">
                <div class="text-size-h1 text-bold text-color-darkest">56</div>
                <div class="text-color-dark line-height-h1">Participants</div>
            </div>
            <div class="progress margin-bottom-20">
                <div class="progress-bar progress-divider bg-info" style="width: 21%;">
                </div>
                <div class="progress-bar progress-divider bg-spectrum-indigo" style="width: 30%;">
                </div>
                <div class="progress-bar progress-divider bg-warning" style="width: 39%;">
                </div>
                <div class="progress-bar progress-divider bg-gray" style="width: 10%;">
                </div>
            </div>
            <div class="display-flex justify-content-between row-gap-10 flex-wrap text-color-darker">
                <div class="LabeledElement display-flex flex-column">
                    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Signed</div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="bg-info rounded-circle height-10 aspect-ratio-1">
                        </span>
                        <span class="text-bold">12</span>
                    </div>
                </div>
                <div class="LabeledElement display-flex flex-column">
                    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Waiting signature</div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="bg-spectrum-indigo rounded-circle height-10 aspect-ratio-1">
                        </span>
                        <span class="text-bold">17</span>
                    </div>
                </div>
                <div class="LabeledElement display-flex flex-column">
                    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Manager review</div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="bg-warning rounded-circle height-10 aspect-ratio-1">
                        </span>
                        <span class="text-bold">22</span>
                    </div>
                </div>
                <div class="LabeledElement display-flex flex-column">
                    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-0">Self review</div>
                    <div class="display-flex align-items-center gap-5">
                        <span class="bg-gray rounded-circle height-10 aspect-ratio-1">
                        </span>
                        <span class="text-bold">5</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```