# Circular Gauge

**Path:** Components/Data Display

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Circular Gauge

 RbCircularGauge is used to show the status and percentage of an ongoing operation in a circular format.
 It supports different gauge types (Semi, Bottomless, Full) and customizable colors.

 Basic Usage

 Simple circular gauge examples with different gauge types.

 Show code

 CPU Usage

 65 %

 Current CPU usage

 65%

 Memory Usage

 42 %

 Memory consumption

 42%

 Disk Space

 78 %

 Disk usage

 78%

 CPU: 65%

 Memory: 42%

 Disk: 78%

 Gauge Types

 Different gauge types: Semi, Bottomless, and Full circle.

 Show code

 Semi Circle Gauge

 25 %

 50 %

 75 %

 Bottomless Circle Gauge

 30 %

 60 %

 90 %

 Full Circle Gauge

 20 %

 55 %

 85 %

 Semi: 25%, 50%, 75%

 Bottomless: 30%, 60%, 90%

 Full: 20%, 55%, 85%

 Colors

 Various color options and custom track/bar colors.

 Show code

 Standard Colors

 65 %

 Primary

 75 %

 Secondary

 85 %

 Success

 45 %

 Warning

 55 %

 Danger

 70 %

 Info

 Custom Track & Bar Colors

 60 %

 Purple

 70 %

 Orange

 80 %

 Teal

 50 %

 Navy

 Standard Colors: Primary: 65%, Secondary: 75%, Success: 85%

 Custom Colors: Purple: 60%, Orange: 70%, Teal: 80%, Navy: 50%

 Stroke Width

 Control the thickness of the gauge stroke.

 Show code

 Thin Stroke (5px)

 30 %

 30 %

 Default Stroke (10px)

 50 %

 50 %

 Thick Stroke (15px)

 70 %

 70 %

 Extra Thick Stroke (20px)

 90 %

 90 %

 5px: 30%

 10px: 50%

 15px: 70%

 20px: 90%

 Readonly & Disabled

 Control interaction states with Readonly and Disabled parameters.

 Show code

 States

 65 %

 Normal

 75 %

 Disabled

 85 %

 Readonly

 Normal: 65%

 Disabled: 75%

 Readonly: 85%

 ✕

 Contents