---
title: Progress
description: A component for showing completion status or loading progress.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/progress'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/progress.md'
---

# Progress

A component for showing completion status or loading progress. For full props documentation, see [Radix Progress](https://www.radix-ui.com/primitives/docs/components/progress).

Examples

## Preview

![progress](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Progress-BItSq2tT.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {Progress} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return <Progress value={50} />
  }
  ```

* ####

  ##### Description

  A progress bar showing 50% completion

  ##### tsx

  ```tsx
  import {Progress} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return <Progress value={50} />
  }
  ```

* ####

  ##### Description

  A completed progress bar at 100%

  ##### tsx

  ```tsx
  import {Progress} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return <Progress value={100} />
  }
  ```

***