1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos progressdatastat

Minimal Progress List

Lista de barras de progreso compactas para comparar porcentajes de categorías.

Storage42%
Bandwidth68%

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { MinimalProgressList } from 'astro-component-kit';
---

<ProgressListSmall>Content</ProgressListSmall>
--- import { MinimalProgressList } from 'astro-component-kit'; --- <ProgressListSmall>Content</ProgressListSmall>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/MinimalProgressList.astro:

astro 
---
---
<div class="p-list">
  <div class="p-row"><span>Storage</span><strong>42%</strong></div>
  <div class="p-bar"><div class="fill" style="width: 42%"></div></div>
  <div style="margin-top: 1rem"></div>
  <div class="p-row"><span>Bandwidth</span><strong>68%</strong></div>
  <div class="p-bar"><div class="fill" style="width: 68%; background: #c084fc"></div></div>
</div>
<style>
  .p-list { width: 100%; max-width: 300px; }
  .p-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 6px; }
  span { color: #64748b; font-weight: 600; }
  strong { color: #fff; }
  .p-bar { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 100px; overflow: hidden; }
  .fill { height: 100%; background: #6366f1; border-radius: inherit; }
</style>
--- --- <div class="p-list"> <div class="p-row"><span>Storage</span><strong>42%</strong></div> <div class="p-bar"><div class="fill" style="width: 42%"></div></div> <div style="margin-top: 1rem"></div> <div class="p-row"><span>Bandwidth</span><strong>68%</strong></div> <div class="p-bar"><div class="fill" style="width: 68%; background: #c084fc"></div></div> </div> <style> .p-list { width: 100%; max-width: 300px; } .p-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 6px; } span { color: #64748b; font-weight: 600; } strong { color: #fff; } .p-bar { height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 100px; overflow: hidden; } .fill { height: 100%; background: #6366f1; border-radius: inherit; } </style>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
MinimalProgressList.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
progressdatastat