---
name: CircularProgress
menu: Atoms
route: /atoms/CircularProgress
---

import CircularProgress from "./CircularProgress";
import { Playground, Props } from "docz";


# Circular Progress

This component renders an HTML `<CircularProgress>` and passes along all props.

## API
<Props of={CircularProgress} />

## CircularProgress with background

<Playground>
  <CircularProgress
    text="85%"
    backgroundColor="#91caa4"
    progressColor="#00695c"
    fontColor="#00695c"
    fontSize={30}
    borderSize="14px"
    progress={85}
    size={150}
  />
</Playground>

## CircularProgress without background

<Playground>
  <CircularProgress
    text="85%"
    progressColor="#00695c"
    fontColor="#00695c"
    fontSize={30}
    borderSize="14px"
    progress={85}
    size={150}
  />
</Playground>

## CircularProgress without text

<Playground>
  <CircularProgress
    text=""
    progressColor="#00695c"
    fontColor="#00695c"
    fontSize={30}
    borderSize="14px"
    progress={85}
    size={150}
  />
</Playground>