---
name: MagaMultiProgressBar
route: /components/maga-multi-progress-bar
menu: Components ⚡️
---

import { Playground, Props } from "docz";
import MagaMultiProgressBar from "../index.tsx";
import "../styles/index.css";

# MagaMultiProgressBar

Barra de progresso multicolorida com definição de porcetagem total.

## Props

<Props of={MagaMultiProgressBar} />

## Uso básico

    import { MagaMultiProgressBar } from 'maga-components'

    <MagaMultiProgressBar
      readings={[
        {
          value: 10,
          color: "#fcd000",
          popup: {
            value: "GPS Pneus, DVD Player, Acessórios"
          }
        },
        {
          value: 20,
          color: "#ff8a00",
          popup: {
            value: "Babadores, berços andadores e brinquedos"
          }
        },
        {
          value: 5,
          color: "#ff253a",
          popup: {
            value: "Jogos, Lego e Autoramas"
          }
        },
        {
          value: 22,
          color: "#ff37a8",
          popup: {
            value: "Geladeiras, Fogões e Armários"
          }
        },
        {
          value: 13,
          color: "#a400e1",
          popup: {
            value: "Celulares, Telefone sem Fio"
          }
        },
        {
          value: 15,
          color: "#0086ff",
          popup: {
            value: "Colchões, Travesseiros e Lençois"
          }
        },
        {
          value: 0.1,
          color: "#000",
          popup: {
            value: "Games"
          }
        }
      ]}
    />

<Playground>
  <MagaMultiProgressBar
    readings={[
      {
        value: 10,
        color: "#fcd000",
        popup: {
          value: "GPS Pneus, DVD Player, Acessórios",
        },
      },
      {
        value: 20,
        color: "#ff8a00",
        popup: {
          value: "Babadores, berços andadores e brinquedos",
        },
      },
      {
        value: 5,
        color: "#ff253a",
        popup: {
          value: "Jogos, Lego e Autoramas",
        },
      },
      {
        value: 22,
        color: "#ff37a8",
        popup: {
          value: "Geladeiras, Fogões e Armários",
        },
      },
      {
        value: 13,
        color: "#a400e1",
        popup: {
          value: "Celulares, Telefone sem Fio",
        },
      },
      {
        value: 15,
        color: "#0086ff",
        popup: {
          value: "Colchões, Travesseiros e Lençois",
        },
      },
      {
        value: 0.1,
        color: "#000",
        popup: {
          value: "Games",
        },
      },
    ]}
  />
</Playground>

## Percentual excedido

    import { MagaMultiProgressBar } from 'maga-components'

    <MagaMultiProgressBar
      readings={[
        {
        value: 0.3,
        color: '#ff37a8',
        popup: {
          value: 'Carga excedida 2'
        }
      },
      {
        value: 125,
        color: '#ff0000',
        popup: {
          value: 'Carga excedida'
        }
      }
      ]}
    />

<Playground>
  <MagaMultiProgressBar
    readings={[
      {
        value: 0.3,
        color: "#ff37a8",
        popup: {
          value: "Carga excedida 2",
        },
      },
      {
        value: 125,
        color: "#ff0000",
        popup: {
          value: "Carga excedida",
        },
      },
    ]}
  />
</Playground>