---
title: "Progress Bar"
slug: "progress-bar"
category: "Mini Widgets"
reactComponent: "ArcWidgetProgressBar"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "progress_bar.tsx"
locale: "es"
hosts: "vue"
---

# Progress Bar

## AI Defaults (read first)

- **Function name**: `arcCustomProgressBar`.
- **valueProgress**: Current progress (numerator), as number.
- **valueTotal**: Target / total (denominator), as number.
- **progressColor**: Fill color (optional; auto amber / green / black by ratio when omitted).
- **backgroundColor**: Track background color.
- **height**: Bar height, e.g. `"8px"`.
- **valueText**: Optional label beside the bar.
- Display-only — no `actions` / persist.

# Progress Bar

![](https://framerusercontent.com/images/CvZw4Szz9DlFWKAz2ei35byiyk.png)

La Progress Bar consiste en un código de aplicación que insertas en un campo de fórmula de Ninox en la superficie que desees dentro de la base de datos.

## Código de aplicación completo

A continuación ves un código de aplicación de ejemplo para una Progress Bar:


```javascript
arcCustomProgressBar({
        uniqueId: "",
        width: "",
        height: "",
        borderRadius: "",
        fontSize: "",
        fontColor: "",
        backgroundColor: "",
        progressColor: "",
        valueTotal: "",
        valueProgress: "",
        valueText: ""
    })
```

***uniqueId*** lo asignas de forma individual y debería ser único en tu superficie. La idea detrás de esto: si creas varias Progress Bars con distintos ajustes en tu página, los estilos no se sobrescriben entre sí.


```javascript
 uniqueId: "Progress 1", // Text in "
```

***width*** indica el ancho de tu Progress Bar.


```javascript
width: "300px", // Pixel-Werte in "
width: "100%", // Prozent-Werte in " / Orientiert sich prozentual an der Breite des Formelfeldes.
```

***height*** indica el alto de tu Progress Bar.


```javascript
height: "300px", // Pixel-Werte in "
height: "100%", // Prozent-Werte in " / Orientiert sich prozentual an der Breite des Formelfeldes.
```

***borderRadius*** indica el redondeo de las esquinas de la Progress Bar.


```javascript
borderRadius: "4px", // Pixel-Werte in "
borderradius: "", // default: 50%
```

***fontSize*** indica el tamaño de fuente de la etiqueta de ***valueText***.


```javascript
fontSize: "14px", // Pixel-Werte in "
```

***fontColor*** indica el color de fuente de la etiqueta de ***valueText***.


```javascript
fontColor: "#FFFFFF", // HEX Code in "
```

***backgroundColor*** define el color de fondo de tu Progress Bar.


```javascript
backgroundColor: "#EEEEEE", // HEX Code in "
```

***progressColor*** define el color de la barra de progreso.


```javascript
progressColor: "#FFBF00", // HEX Coe in "
progressColor: if Status= 2 then "#FFBF00" else "#e9ecf4", // Ninox-Formeln, -Schreibweisen & -Konfditionen möglich. Wichtig ist, dass text() bei ausgegeben wird.
```

***valueTotal*** define el valor total de tu Progress Bar. Es decir, el denominador de una fracción.


```javascript
valueTotal: 20, // Zahlenwert
valueTotal: Projekt.umsatzZiel, // Referenzierte Ninox-Felder. Auch gehen Ninox-Funktionen & -Schreibweisen.
```

***valueProgress*** define el valor alcanzado hasta ahora. El numerador de una fracción.


```javascript
valueProgress: 10, // Zahlenwert
valueProgress: Projekt.umsatzAktuell// Referenzierte Ninox-Felder. Auch gehen Ninox-Funktionen & -Schreibweisen.
```

***valueText*** muestra la denominación junto a tu Progress Bar. Es recomendable mostrar aquí los valores como texto,


```javascript
 valueText: Projekt.umsatzAktuell + " / " + Projekt.umsatzZiel
```

## Valores estándar como fallback

💡 **Nota: **Si no rellenas valores en los parámetros, en la mayoría de los casos hay un valor de fallback definido en el sistema. En algunos sitios, como campos de cálculo (valores numéricos reales, por ejemplo), esto no tiene sentido. En parámetros de estilo, como colores o tamaños, en cambio sí. Aquí ves el código sin valores rellenados y en los comentarios a continuación los valores estándar:


```javascript
arcCustomProgressBar({
        uniqueId: "", // Kein Fallback
        width: "", // Fallback: 100%
        fontSize: "", // Fallback: 12px
        fontColor: "", // Fallbacke: #000000 (schwarz)
        backgroundColor: "", // Fallback: #EEEEEE
        progressColor: "", // Fallback:
            if data.progressColor = " then
            switch complete do
            case true:
                "#76CD3C" // gelb
            case false:
                if number(data.valueTotal) < number(data.valueProgress) then
                    "#000"
                else
                    "#FFBF00" // grün
                end
            default:
                "#e9ecf4"
            end
        else
            text(data.progressColor)
        end;

        valueTotal: "", // Kein Fallback
        valueProgress: "", // Kein Fallback
        valueText: "" // Kein Fallback
    })
```