Barras de puntos

Aprobado2026-10-02 · Aprobado por el founder en la revisión visual.

Uso de cuota, avance, consumo: reemplazan barras de progreso y medidores.

Vista · datos de ejemplo

Archivos 640MB de 1 GB

Anatomía

20 cuadrados de 6 px
Llenos en naranja según el porcentaje, vacíos en gris

Sí

Acompáñala del número y su unidad

No uses barras redondeadas ni degradados

HTML exacto

<div style="display:flex;flex-direction:column;gap:14px;max-width:360px">
  <div class="nu-dato" style="border:1px solid var(--nu-linea)">
    <span class="nu-dato__etiqueta">Archivos</span>
    <span class="nu-dato__valor"><span class="nu-dato__numero">640</span><span class="nu-dato__unidad">MB de 1 GB</span></span>
    <span class="nu-puntos" aria-label="63 % usado">
      <span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto" data-lleno="true"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span><span class="nu-punto"></span>
    </span>
  </div>
</div>

Clases: .nu-puntos .nu-punto · Fragmento: snippets/dot-bars.html