| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| width | number | string | 100 | false | The CSS width of the element |
| height | number | string | 100 | false | The CSS height of the element |
| steps | number | 10 | false | The total number of steps to complete the ring |
| step | number | 10 | false | The current step |
| startStep | number | 0 | false | Start animating from this step, to the current step |
| duration | number | 5000 | false | The time in milliseconds to complete an animation of all steps in the ring |
| ringThickness | number | 0.2 | false | The thickness of the progress ring, expressed as a proportion (0.0 to 1.0) of the radius of the ring |
| ringBgColour | string | CanvasGradient | CanvasPattern | '#ccc' | false | The colour of the uncompleted steps of the ring |
| ringFgColour | string | CanvasGradient | CanvasPattern | '#3c763d' | false | The colour of the completed steps of the ring |
| ringIntermediateColour | string | CanvasGradient | CanvasPattern | '#aaa' | false | The colour of the 'intermediate' progress indicator that travels around the ring |
| backgroundColour | string | CanvasGradient | CanvasPattern | '#dff0d8' | false | The colour for the centre of the ring |
| backgroundTransparent | boolean | true | false | Whether to display the centre of the ring as transparent |
| showIntermediateProgress | boolean | false | false | Whether to display the 'intermediate' progress bar |
| segmented | boolean | true | false | Whether to segment the steps by displaying a gap between them |
| fontRatio | number | 4 | false | The number the radius is divided by to set the font size |
| text | (steps: number, proportion: number) => React.Node | (steps: number, proportion: number) => { const step = Math.floor(steps * proportion); return ${step}/${steps};} |
false | A function that returns the content that is displayed in the centre of the ring |