> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/color-admin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/color-admin/components/progress-kpi.md).

# Progress KPI

![Color Admin Progress KPI](https://1156102147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYcwlDkehKxzwWHredew5%2Fuploads%2FCn9Dw4WvhWr4LBPVOFfG%2Fimage.png?alt=media\&token=c7ade168-a8e2-4dfe-9374-528071e534ba)

Color Admin Progress KPIThe [Progress KPI](https://seantheme.com/color-admin/admin/html/index_v2.html) component is native to the Color Admin theme. It displays a label at the top of the KPI along with a pronounced metric value in the middle. The bottom displays a line with a description showing progress a goal.

## Library <a href="#library" id="library"></a>

The Progress KPI component is located in the Color Admin for WireBootstrap library file located at `\lib\color-admin`.

## Class <a href="#class" id="class"></a>

The Count KPI extends the \<wire.ui.component> class. As such, it inherits all the base functionality of that class.To create a new instance of the Count KPI component, use the `wire.colorAdmin.kpiProgress` class.1const kpi = wire.colorAdmin.kpiProgress();Exit with⌃↩

## Example <a href="#example" id="example"></a>

An example that demonstrates the Progress KPI component can be found in the Color Admin for WireBootstrap project at `\pages\kpis-progress.html`.