---
name: ProgressItem
menu: Molecules
route: /molecules/ProgressItem
---

import ProgressItem from './ProgressItem';
import { Playground, Props } from 'docz';

# ProgressItem

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

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

## ProgressItem

<Playground>
  <ProgressItem
    progressText={"82%"}
    text={"Avance general de compromisos"}
    textSize={"15px"}
    progressColor={"#4CAF50"}
    progress={82}
    progressSize={82}
    progressBorderSize={"10px"}
    progressFontSize={"21px"}
    progressFontColor={"#000"}
    progressBackgroundColor={"#fff"}
    width={"180px"}
  />
</Playground>

## ProgressItem

<Playground>
  <ProgressItem
    progressText={"2/5"}
    text={"Mis tareas pendientes"}
    textSize={"15px"}
    progressColor={"red"}
    progress={40}
    progressSize={82}
    progressBorderSize={"14px"}
    progressFontSize={"21px"}
    progressFontColor={"#000"}
    progressBackgroundColor={"#fff"}
    width={"180px"}
  />
</Playground>

## ProgressItem

<Playground>
  <ProgressItem
    progressText={"83%"}
    text={"Cumplimiento general de compromisos"}
    textSize={"15px"}
    progressFontSize={"40px"}
    progressFontColor={"#4CAF50"}
    progressBackgroundColor={"#fff"}
    width={"180px"}
    progressSize={"100px"}
  />
</Playground>