diff --git a/packages/@react-spectrum/progress/docs/ProgressBar.mdx b/packages/@react-spectrum/progress/docs/ProgressBar.mdx
new file mode 100644
index 00000000000..9be4918b28e
--- /dev/null
+++ b/packages/@react-spectrum/progress/docs/ProgressBar.mdx
@@ -0,0 +1,141 @@
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/progress';
+import {HeaderInfo, PropTable} from '@react-spectrum/docs';
+import packageData from '../package.json';
+
+```jsx import
+import {Flex} from '@react-spectrum/layout';
+import {ProgressBar} from '@react-spectrum/progress';
+import {View} from '@react-spectrum/view';
+```
+
+# ProgressBar
+
+{docs.exports.ProgressBar.description}
+
+
+
+## Example
+
+```tsx example
+
+```
+
+## Value
+
+ProgressBars are controlled with the `value` prop representing current percentage (as an integer).
+In this case, the minimum and maximum values default to 0 and 100, respectively.
+
+```tsx example
+
+```
+
+Alternatively, a different scale can be used by setting the `minValue` and `maxValue`.
+
+```tsx example
+
+```
+
+Values are formatted as a percentage by default, but can be modified by using the `formatOptions` for different formats.
+`formatOptions` is compatible with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and is applied to the current locale.
+
+```tsx example
+
+```
+
+### Indeterminate
+[View guidelines](https://spectrum.adobe.com/page/bar-loader/#Determinate-or-indeterminate)
+
+By default, ProgressBars are determinate. Use a determinate ProgressBar when progress can be calculated against a specific goal.
+
+```tsx example
+
+```
+
+Use an indeterminate ProgressBar when the wait time or effort to completion can not be determined.
+
+```tsx example
+
+```
+
+### Accessibility
+
+Depending on the visualization being used (i.e. depending on the `showValueLabel` prop), a `label`, `aria-label`, or `aria-labelledby` attribute is required.
+
+```tsx example
+
+```
+
+If using the over background variant, ensure the background offers enough contrast for the ProgressBar to be legible and meets color contrast guidelines.
+
+### Internationalization
+
+To internationalize a ProgressBar, a localized string should be passed to the `label` prop, `aria-label` prop, or value of the associated `aria-labelledby` element.
+
+For languages that are read right to left (e.g. Hebrew and Arabic), the layout is mirrored for both determinate and indeterminate options.
+
+## Labels
+[View guidelines](https://spectrum.adobe.com/page/bar-loader/#Label-or-no-label)
+
+Labels and value labels are shown by default on top, but they can also be moved to the side or hidden as needed.
+
+```tsx example
+
+
+
+
+
+```
+
+Value labels by default show the percentage of progress in a determinate ProgressBar. These can be customized using the following props.
+
+`showValueLabel`: Hides the value label
+
+`formatOptions`: Allows you to customize the format of the percentage
+
+`valueLabel`: Allows you to customize the value label to any string.
+
+```tsx example
+
+
+
+
+
+```
+
+## Props
+
+
+
+## Visual Options
+
+### Over background
+[View guidelines](https://spectrum.adobe.com/page/bar-loader/#Over-background)
+
+When a ProgressBar needs to be placed on top of a colored background, use the `overBackground` variant.
+
+```tsx example
+
+
+
+```
+
+### Size
+[View guidelines](https://spectrum.adobe.com/page/bar-loader/#Size)
+
+```tsx example
+
+
+
+
+```
diff --git a/packages/@react-spectrum/progress/src/ProgressBar.tsx b/packages/@react-spectrum/progress/src/ProgressBar.tsx
index 13515328d77..58e9a5a7d5b 100644
--- a/packages/@react-spectrum/progress/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressBar.tsx
@@ -42,5 +42,9 @@ function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef