# Loading progress

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

## Loading progress

### Example: Label

Label
0%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.

#### React (tsx)

```tsx
import { useState } from 'react';

import Card from '@rio-cloud/rio-uikit/Card';
import Spinner from '@rio-cloud/rio-uikit/Spinner';
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
import useInterval from '@rio-cloud/rio-uikit/useInterval';

export default () => {
    const [value, setValue] = useState(0);

    useInterval(() => {
        setValue(oldValue => (oldValue + 1) % 101);
    }, 150);

    return (
        <div className='max-width-500 margin-auto'>
            <Card className='display-flex flex-column gap-5'>
                <div className='display-flex justify-content-between gap-5'>
                    <div className='display-flex align-items-center'>
                        <div className='margin-right-3 text-color-dark'>Label</div>
                        <SimpleTooltip content='Some helper text' placement='top'>
                            <span className='rioglyph rioglyph-question-sign text-color-dark' />
                        </SimpleTooltip>
                    </div>
                    <span className='display-flex gap-5'>
                        <span className='text-color-darker'>{value}%</span>
                        <span className='scale-80'>
                            <Spinner />
                        </span>
                    </span>
                </div>
                <div className='progress'>
                    <div className='progress-bar bg-info' style={{ width: `${value}%` }} />
                </div>
                <div className='text-color-dark text-size-12 margin-top-5'>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt,
                    at volutpat nunc facilisis. Sed auctor.
                </div>
            </Card>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-500 margin-auto">
    <div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-5">
        <div class="display-flex justify-content-between gap-5">
            <div class="display-flex align-items-center">
                <div class="margin-right-3 text-color-dark">Label</div>
                <span class="rioglyph rioglyph-question-sign text-color-dark">
                </span>
            </div>
            <span class="display-flex gap-5">
                <span class="text-color-darker">1%</span>
                <span class="scale-80">
                    <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
                        <div class="spinner">
                            <div>
                            </div>
                            <div>
                            </div>
                            <div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
                </span>
            </span>
        </div>
        <div class="progress">
            <div class="progress-bar bg-info" style="width: 1%;">
            </div>
        </div>
        <div class="text-color-dark text-size-12 margin-top-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula magna quis ante tincidunt, at volutpat nunc facilisis. Sed auctor.</div>
    </div>
</div>
```