# Progress success

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

## Progress success

### Example: Diam nonummy

Lorem ipsum dolor sit amet
Diam nonummy
Consetetur sadipscing
Voluptua
Eirmod tempor
Eum iriure
500
Sanctus
No sea takimata
Vulputate
Tempor invidunt
Duis autem vel eum

#### React (tsx)

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

export default () => (
    <div className='max-width-500 margin-auto'>
        <div className='display-grid place-items-center margin-y-25 margin-x-25-sm'>
            <div className='width-100pct max-width-500'>
                <div className='panel panel-default position-relative'>
                    <div
                        className={
                            'position-absolute top-0pct left-50pct translate-x-50pct-y-50pct ' +
                            'border rounded-circle width-60 height-60 display-grid place-items-center bg-white'
                        }
                    >
                        <span className='rioglyph rioglyph-ok text-color-success text-size-16 scale-150' />
                    </div>
                    <div className='panel-body padding-10 padding-25-ls'>
                        <div className='border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center'>
                            <span className='text-color-success text-size-20'>Lorem ipsum dolor sit amet</span>
                        </div>
                        <div className='padding-10 padding-20-ls'>
                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
                                <FormLabel className='text-right margin-0 line-height-20'>Diam nonummy</FormLabel>
                                <span>Consetetur sadipscing</span>
                            </div>
                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
                                <FormLabel className='text-right margin-0 line-height-20'>Voluptua</FormLabel>
                                <span>Eirmod tempor</span>
                            </div>
                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
                                <FormLabel className='text-right margin-0 line-height-20'>Eum iriure</FormLabel>
                                <span>500</span>
                            </div>
                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
                                <FormLabel className='text-right margin-0 line-height-20'>Sanctus</FormLabel>
                                <span className='text-medium'>No sea takimata</span>
                            </div>
                            <div className='display-grid grid-cols-2 gap-20 padding-10 padding-15-ls'>
                                <FormLabel className='text-right margin-0 line-height-20'>Vulputate</FormLabel>
                                <div>
                                    <div>Tempor invidunt</div>
                                    <div className='margin-top-5 text-color-gray'>Duis autem vel eum</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-500 margin-auto">
    <div class="display-grid place-items-center margin-y-25 margin-x-25-sm">
        <div class="width-100pct max-width-500">
            <div class="panel panel-default position-relative">
                <div class="position-absolute top-0pct left-50pct translate-x-50pct-y-50pct border rounded-circle width-60 height-60 display-grid place-items-center bg-white">
                    <span class="rioglyph rioglyph-ok text-color-success text-size-16 scale-150">
                    </span>
                </div>
                <div class="panel-body padding-10 padding-25-ls">
                    <div class="border border-bottom-only padding-x-20 padding-top-25 padding-bottom-15 text-center">
                        <span class="text-color-success text-size-20">Lorem ipsum dolor sit amet</span>
                    </div>
                    <div class="padding-10 padding-20-ls">
                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Diam nonummy</div>
                            <span>Consetetur sadipscing</span>
                        </div>
                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Voluptua</div>
                            <span>Eirmod tempor</span>
                        </div>
                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Eum iriure</div>
                            <span>500</span>
                        </div>
                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Sanctus</div>
                            <span class="text-medium">No sea takimata</span>
                        </div>
                        <div class="display-grid grid-cols-2 gap-20 padding-10 padding-15-ls">
                            <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 text-right margin-0 line-height-20">Vulputate</div>
                            <div>
                                <div>Tempor invidunt</div>
                                <div class="margin-top-5 text-color-gray">Duis autem vel eum</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```