Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Carregando Componente

Última atualização:

Indicador de carregamento Tailwind CSS somente CSS com animações de girador, pontos, anel e barras. Variantes de cor e tamanho, sem necessidade de JavaScript. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes de carregamento exibem indicadores visuais enquanto o conteúdo está sendo buscado ou processado, mantendo os usuários informados e evitando atrasos percebidos. Construídos com HTML semântico e animações CSS suaves, os spinners de carregamento comunicam operações ativas em segundo plano. O sistema de carregamento Frutjam oferece suporte a vários estilos, cores e tamanhos – ideal para tabelas de dados, uploads de arquivos, envios de formulários e operações assíncronas.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
loadingBaseIndicador de anel giratório, herda a cor do texto por padrão
loading-dotsEstiloTrês pontos pulsantes
loading-barsEstiloTrês barras verticais animadas
loading-xsTamanhoExtra pequeno (1rem)
loading-smTamanhoPequeno (1,25rem)
loading-mdTamanhoMédio (1,5rem, padrão)
loading-lgTamanhoGrande (2rem)
loading-xlTamanhoExtra grande (2,5rem)
loading-baseCorCor da superfície base silenciada
loading-currentCorHerda explicitamente a cor do texto atual
loading-primaryCorCor do tema principal
loading-secondaryCorCor do tema secundário
loading-accentCorCor do tema de destaque
loading-neutralCorCor neutra do tema
loading-infoCorCor semântica da informação
loading-successCorCor semântica de sucesso
loading-warningCorCor semântica de aviso
loading-errorCorCor semântica do erro

Uso Básico

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

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

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

Carregando estilos

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

Carregando tamanhos

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>

Carregando Cores

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>

Carregando a cor atual

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>

Carregando no botão

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>

Carregando Estados

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 ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Carregando e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP