Percentage Circle
Overview
The percentage circle component visually represents a percentage value as a colored circle wrapped around a text value.
The colored portion of the circle represents the percentage amount, somewhat similar to a progress bar, but displayed as a circle.
This element is useful in dashboards since it is large and displays a numeric value as a type of infographic.
Development
Web component development
Component reference
rui-percentage-circle
Displays a percentage as a circle wrapped around a value.
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | '' | The text displayed in the center of the circle. This is often the same as the percentage value, but can be any text value. |
| value | number | 0 | Specifies the percentage value (0-100) displayed. Values less than 0 are shown as 0; values greater than 100 are shown as 100. |
| size | string | ‘medium’ | Specifies the relative size of the percentage circle. Valid values are ‘small’, ‘medium’, and ’large’. |
Begin by importing the rui-percentage-circle module into your application.
// import into app.module
import '@jha/rui-wc/components/rui-percentage-circle/rui-percentage-circle-imports';
Use the rui-percentage-circle element to create a percentage circle.
<rui-percentage-circle [text]="currentValue" [value]="currentValue"></rui-percentage-circle>
Angular component development
Component reference
jha-percentage-circle
Displays a percentage as a circle wrapped around a value.
| Name | Type | Default | Description |
|---|---|---|---|
| jhaText | string | '' | The text displayed in the center of the circle. This is often the same as the percentage value, but can be any text value. |
| jhaValue | number | 0 | Specifies the percentage value (0-100) displayed. Values less than 0 are shown as 0; values greater than 100 are shown as 100. |
| size | jhaSize | ‘medium’ | Specifies the relative size of the percentage circle. Valid values are ‘small’, ‘medium’, and ’large’. |
Begin by importing the JhaPercentageCircleModule module into your application.
// import into app.module
import { JhaPercentageCircleModule } from '@jha/jharesponsive/jha-percentage-circle';
@NgModule({
imports: [
...
JhaPercentageCircleModule,
...
]
})
export class AppModule(){}
Use the jha-percentage-circle element to create a percentage circle.
<jha-percentage-circle [jhaText]="currentValue" [jhaValue]="currentValue"></jha-percentage-circle>
Component playground
Design
Figma design
| Dev Component | Design Component Name |
|---|---|
| Percentage circle | RUI / Percentage Circle |
The Percentage Circle dev component comes in 3 sizes:
- Large: 240 x 240
- Medium: 120 x 120
- Small: 80 x 80
The base design component uses the large size. If you’d like to use a medium or small size, resize the component to one of the sizes listed above.
While you can change the number displayed in the center, it would be extremely difficult to change the percentage that’s shown graphically, so it’s probably best to just use the percentage circle as-is.
Adobe XD design
- Sample App - Percentage Circle
- Sample App - Progress Bar
| Dev Component | Design Component Name |
|---|---|
| Percentage circle | JHA / Dashboard / Percentage Circle |
The Percentage Circle dev component comes in 3 sizes:
- Large: 240 x 240
- Medium: 120 x 120
- Small: 80 x 80
The base design component uses the large size. If you’d like to use a medium or small size, resize the component to one of the sizes listed above.
While you can change the number displayed in the center, it would be extremely difficult to change the percentage that’s shown graphically, so it’s probably best to just use the percentage circle as-is.