Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de carga

Última actualización:

Indicador de carga CSS Tailwind solo CSS con animaciones giratorias, puntos, anillos y barras. Variantes de color y tamaño, no se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de carga muestran indicadores visuales mientras se recupera o procesa el contenido, lo que mantiene a los usuarios informados y evita retrasos percibidos. Construidos con HTML semántico y animaciones CSS fluidas, los controles giratorios de carga comunican operaciones activas en segundo plano. El sistema de carga Frutjam admite múltiples estilos, colores y tamaños, ideal para tablas de datos, carga de archivos, envío de formularios y operaciones asincrónicas.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
loadingBaseIndicador de anillo giratorio, hereda el color del texto de forma predeterminada
loading-dotsEstiloTres puntos pulsantes
loading-barsEstiloTres barras verticales animadas
loading-xsTamañoExtra pequeño (1rem)
loading-smTamañoPequeño (1,25 rem)
loading-mdTamañoMedio (1,5rem, predeterminado)
loading-lgTamañoGrande (2rem)
loading-xlTamañoExtra grande (2,5 rem)
loading-baseColorColor de superficie base apagado
loading-currentColorHereda explícitamente el color del texto actual.
loading-primaryColorColor del tema principal
loading-secondaryColorColor del tema secundario
loading-accentColorColor del tema de acento
loading-neutralColorColor de tema neutro
loading-infoColorColor semántico de información
loading-successColorColor semántico del éxito
loading-warningColorColor semántico de advertencia
loading-errorColorColor semántico del error

Uso básico

<span class="loading"></span>

<span className="loading"></span>

<span class="loading"></span>

Estilos de carga

html 
1
2
3
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>

Tamaños de carga

html 
1
2
3
4
5
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>
<span class="loading loading-xl"></span>

Cargando colores

html 
1
2
3
4
5
6
7
8
9
<span class="loading loading-base"></span>
<span class="loading loading-primary"></span>
<span class="loading loading-secondary"></span>
<span class="loading loading-accent"></span>
<span class="loading loading-info"></span>
<span class="loading loading-success"></span>
<span class="loading loading-warning"></span>
<span class="loading loading-error"></span>
<span class="loading loading-neutral"></span>

Cargando el color actual

Inherits primary text color

Inherits error text color

html 
1
2
3
4
5
6
7
8
<p class="text-primary flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits primary text color
</p>
<p class="text-error flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits error text color
</p>

Cargando en el botón

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<button class="btn gap-2">
  <span class="loading loading-sm"></span>
  Loading
</button>

<button class="btn btn-primary gap-2">
  <span class="loading loading-sm loading-current"></span>
  Processing
</button>

<button class="btn btn-error gap-2">
  <span class="loading loading-sm loading-current"></span>
  Deleting
</button>

Estados de carga

Loading Data

Fetching information...
html 
1
2
3
4
5
6
7
8
9
<div class="card card-outline w-96">
  <div class="card-content">
    <h3 class="card-title">Loading Data</h3>
    <div class="flex items-center gap-2">
      <span class="loading loading-md"></span>
      <span>Fetching information...</span>
    </div>
  </div>
</div>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Cargando según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP