Progress circle documentation

packages/@react-spectrum/progress/docs/ProgressCircle.mdx

@@ -0,0 +1,103 @@
+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 {ProgressCircle} from '@react-spectrum/progress';
+import {View} from '@react-spectrum/view';
+```
+
+# ProgressCircle
+
+<p>{docs.exports.ProgressCircle.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['ProgressCircle']}
+  sourceData={[
+    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/circle-loader/'}
+  ]} />
+
+## Example
+
+```tsx example
+<ProgressCircle aria-label="Loading…" value={50} />
+```
+
+## Value
+
+By default ProgressCircles 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
+<ProgressCircle aria-label="Loading…" value={25} />
+```
+
+Alternatively, a different scale can be used by setting the `minValue` and `maxValue`.
+
+```tsx example
+<ProgressCircle aria-label="Loading…" minValue={50} maxValue={150} value={100} />
+```
+
+### Indeterminate
+[View guidelines](https://spectrum.adobe.com/page/circle-loader/#Indeterminate)
+
+By default, ProgressCircles are determinate. Use a determinate ProgressCircle when progress can be calculated against a specific goal.
+
+```tsx example
+<ProgressCircle aria-label="Loading…" value={50} />
+```
+
+Use an indeterminate ProgressCircle when progress is happening but the time or effort to completion can’t be determined.
+
+```tsx example
+<ProgressCircle aria-label="Loading…" isIndeterminate />
+```
+
+### Accessibility
+
+ProgressCircle requires an `aria-label` or `aria-labelledby` attribute.
+
+```tsx example
+<div>
+  <ProgressCircle aria-labelledby="pc-label" isIndeterminate />
+  <label id="pc-label" style={{display: 'block'}}>Loading…</label>
+</div>
+```
+
+If using the `overBackground` variant, ensure the background offers enough contrast for the ProgressCircle to be legible and meets color contrast guidelines.
+
+### Internationalization
+
+To internationalize a ProgressCircle, a localized string should be passed to the `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 fill of both determinate and indeterminate ProgressCircles continues to spin clockwise.
+
+## Props
+
+<PropTable component={docs.exports.ProgressCircle} links={docs.links} />
+
+## Visual Options
+
+### Over background
+[View guidelines](https://spectrum.adobe.com/page/circle-loader/#Over-background-variant)
+
+When a ProgressCircle needs to be placed on top of a colored background, use the `overBackground` variant.
+
+```tsx example
+<View backgroundColor="positive" padding="25px">
+  <ProgressCircle aria-label="Loading…" isIndeterminate variant="overBackground" />
+</View>
+```
+
+### Size
+[View guidelines](https://spectrum.adobe.com/page/circle-loader/#Size)
+
+```tsx example
+<ProgressCircle aria-label="Loading…" marginRight="25px" size="S" value={15} />
+<ProgressCircle aria-label="Loading…" marginRight="25px" value={30} />
+<ProgressCircle aria-label="Loading…" size="L"  value={60} />
+```

packages/@react-spectrum/progress/src/ProgressCircle.tsx

@@ -99,5 +99,9 @@ function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef<HTMLDivE
   );
 }
 
+/**
+ * ProgressCircles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.
+ * They can represent determinate or indeterminate progress.
+ */
 let _ProgressCircle = React.forwardRef(ProgressCircle);
 export {_ProgressCircle as ProgressCircle};