Progress
Barra de progreso lineal. Sin label renderiza solo la pista; con label envuelve en .ok-progress-block con cabecera label + value.
<div style="width: 100%; max-width: 360px;">
<div class="progress"
role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="42">
<div class="progress-bar" style="width: 42%;"></div>
</div>
</div>
{% from "progress-bar.jinja" import progress_bar %}
<div style="width: 100%; max-width: 360px;">
{{ progress_bar(value=42) }}
</div>
<div style="width: 100%; max-width: 360px;">
<ProgressBar value="42" />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Importando productos1.842 / 2.500 · 73%
<div style="width: 100%; max-width: 480px;">
<div class="progress-block">
<div class="head">
<span class="label">Importando productos</span><span class="value">1.842 / 2.500 · 73%</span>
</div>
<div class="progress"
role="progressbar"
aria-label="Importando productos"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="73">
<div class="progress-bar" style="width: 73%;"></div>
</div>
</div>
</div>
{% from "progress-bar.jinja" import progress_bar %}
<div style="width: 100%; max-width: 480px;">
{{ progress_bar(value=73, label="Importando productos", value_text="1.842 / 2.500 · 73%") }}
</div>
<div style="width: 100%; max-width: 480px;">
<ProgressBar value="73" label="Importando productos" value_text="1.842 / 2.500 · 73%" />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Cuota de almacenamiento9,2 / 10 GB
<div style="width: 100%; max-width: 480px; display: grid; gap: 14px;">
<div class="progress-block">
<div class="head">
<span class="label">Generando informe SII</span><span class="value">42%</span>
</div>
<div class="progress leaf"
role="progressbar"
aria-label="Generando informe SII"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="42">
<div class="progress-bar" style="width: 42%;"></div>
</div>
</div>
<div class="progress-block">
<div class="head">
<span class="label">Cuota de almacenamiento</span><span class="value">9,2 / 10 GB</span>
</div>
<div class="progress warn"
role="progressbar"
aria-label="Cuota de almacenamiento"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="92">
<div class="progress-bar" style="width: 92%;"></div>
</div>
</div>
<div class="progress-block">
<div class="head">
<span class="label">Cierre forzado</span><span class="value">88%</span>
</div>
<div class="progress danger"
role="progressbar"
aria-label="Cierre forzado"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="88">
<div class="progress-bar" style="width: 88%;"></div>
</div>
</div>
<div class="progress-block">
<div class="head">
<span class="label">Sincronizando</span><span class="value">64%</span>
</div>
<div class="progress info"
role="progressbar"
aria-label="Sincronizando"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="64">
<div class="progress-bar" style="width: 64%;"></div>
</div>
</div>
</div>
{% from "progress-bar.jinja" import progress_bar %}
<div style="width: 100%; max-width: 480px; display: grid; gap: 14px;">
{{ progress_bar(value=42, label="Generando informe SII", value_text="42%", variant="leaf") }}
{{ progress_bar(value=92, label="Cuota de almacenamiento", value_text="9,2 / 10 GB", variant="warn") }}
{{ progress_bar(value=88, label="Cierre forzado", value_text="88%", variant="danger") }}
{{ progress_bar(value=64, label="Sincronizando", value_text="64%", variant="info") }}
</div>
<div style="width: 100%; max-width: 480px; display: grid; gap: 14px;">
<ProgressBar value="42" label="Generando informe SII" value_text="42%" variant="leaf" />
<ProgressBar value="92" label="Cuota de almacenamiento" value_text="9,2 / 10 GB" variant="warn" />
<ProgressBar value="88" label="Cierre forzado" value_text="88%" variant="danger" />
<ProgressBar value="64" label="Sincronizando" value_text="64%" variant="info" />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div style="width: 100%; max-width: 480px; display: grid; gap: 14px;">
<div class="progress sm"
role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="58">
<div class="progress-bar" style="width: 58%;"></div>
</div>
<div class="progress"
role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="58">
<div class="progress-bar" style="width: 58%;"></div>
</div>
<div class="progress lg striped"
role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="58">
<div class="progress-bar" style="width: 58%;"></div>
</div>
</div>
{% from "progress-bar.jinja" import progress_bar %}
<div style="width: 100%; max-width: 480px; display: grid; gap: 14px;">
{{ progress_bar(value=58, size="sm") }}
{{ progress_bar(value=58) }}
{{ progress_bar(value=58, size="lg", striped=True) }}
</div>
<div style="width: 100%; max-width: 480px; display: grid; gap: 14px;">
<ProgressBar value="58" size="sm" />
<ProgressBar value="58" />
<ProgressBar value="58" size="lg" striped />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Subiendo facturaesperando…
<div style="width: 100%; max-width: 480px;">
<div class="progress-block">
<div class="head">
<span class="label">Subiendo factura</span><span class="value">esperando…</span>
</div>
<div class="progress indeterminate"
role="progressbar"
aria-label="Subiendo factura"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar"></div>
</div>
</div>
</div>
{% from "progress-bar.jinja" import progress_bar %}
<div style="width: 100%; max-width: 480px;">
{{ progress_bar(label="Subiendo factura", value_text="esperando…", indeterminate=True) }}
</div>
<div style="width: 100%; max-width: 480px;">
<ProgressBar label="Subiendo factura" value_text="esperando…" indeterminate />
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div data-signals="{ pct: 35 }" style="width: 100%; max-width: 480px;">
<div class="progress" data-attr:style="'--progress-value:' + $pct + '%'">
<div class="progress-bar"></div>
</div>
<div style="margin-top: 10px; display: flex; gap: 8px;">
<button
type="button"
class="btn ghost sm"
data-on:click="$pct = Math.max(0, $pct - 10)">−10</button>
<button
type="button"
class="btn primary sm"
data-on:click="$pct = Math.min(100, $pct + 10)">+10</button>
<span data-text="$pct + '%'" style="margin-left: 8px; font-variant-numeric: tabular-nums;">35%</span>
</div>
</div>
{% from "progress-bar.jinja" import progress_bar %}
{% from "button.jinja" import button %}
<div data-signals="{ pct: 35 }" style="width: 100%; max-width: 480px;">
<div class="progress" data-attr:style="'--progress-value:' + $pct + '%'">
<div class="progress-bar"></div>
</div>
<div style="margin-top: 10px; display: flex; gap: 8px;">
{{ button("−10", variant="ghost", size="sm", attrs={"data-on:click": "$pct = Math.max(0, $pct - 10)"}) }}
{{ button("+10", variant="primary", size="sm", attrs={"data-on:click": "$pct = Math.min(100, $pct + 10)"}) }}
<span data-text="$pct + '%'" style="margin-left: 8px; font-variant-numeric: tabular-nums;">35%</span>
</div>
</div>
<div data-signals="{ pct: 35 }" style="width: 100%; max-width: 480px;">
<div class="progress" data-attr:style="'--progress-value:' + $pct + '%'">
<div class="progress-bar"></div>
</div>
<div style="margin-top: 10px; display: flex; gap: 8px;">
<Button label="−10" variant="ghost" size="sm" data-on:click="$pct = Math.max(0, $pct - 10)" />
<Button label="+10" variant="primary" size="sm" data-on:click="$pct = Math.min(100, $pct + 10)" />
<span data-text="$pct + '%'" style="margin-left: 8px; font-variant-numeric: tabular-nums;">35%</span>
</div>
</div>
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
value | int | 0 | Porcentaje 0..100. |
label | str|None | None | Si está, envuelve en .ok-progress-block con cabecera. |
value_text | str|None | None | Texto en la cabecera (e.g. "73%", "1.842 / 2.500"). Solo si hay label. |
variant | "leaf"|"warn"|"danger"|"info"|None | None | Color del bar. |
size | "sm"|"md"|"lg" | "md" | Altura. |
indeterminate | bool | False | Animación de carga sin valor concreto. |
striped | bool | False | Efecto rayado animado. |
attrs | dict | {} | Atributos HTML extra en el track. |