## Circle Progress

A quick and visual way to show progress in a circle.
Demo

Shareable Link | Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | --- | ---
Share | Progress | Circlular Progress | This component renders progress of earnings | value: Number max: Number prefix: string type: string width: string height: string | true |  |
Share | Progress | Circular progress with inner image | This component renders profile progress with photo inside. | value: Number max: Number prefix: string suffix: string imageUrl: string width: string height: string | true |  |
Share | Progress | Circular progress with inner image [interactive] | #### Adjust size of circle progress [{{ widthPartial }}] 50 300 | value: Number max: Number prefix: string imageUrl: string width: string height: string | true |  |
Share | Progress | Circular progress with complete circle filled | #### Adjust value of circle progress [{{ valueComplete }}] 50 300 | value: Number max: Number prefix: string imageUrl: string width: string height: string | true |  |

Required Imports
import { CircleProgressModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | default | Required
--- | --- | --- | --- | ---
Input | width | Defines the width of the circle progress. | 62.6px | false
Input | height | Defines the height of the circle progress. | 63.18px | false
Input | prefix | Prefix displayed before the progress value. | $ | false
Input | suffix | Suffix displayed after the progress value. | empty | false
Input | value | Current progress value. | 10 | true
Input | max | Maximum possible value for the progress. | 100 | true
Input | imageUrl | URL of the image displayed within the circle progress. | n/a | false
Input | type | Type of the circle progress (custom type description can be added). | n/a | false

Example usage
`{{ circleProgressCode }}`