Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogofeedback · stable

Loaders

Indicadores de carregamento e espera que preservam espaço e informam estado. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Loaders quando a interface precisar de indicadores de carregamento e espera que preservam espaço e informam estado.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Spinner

Spinner, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; gap:12px; flex-wrap:wrap; align-items:center;">
                <span class="sc-loader sc-loader-spin" role="status" aria-label="Carregando"></span>
                <span class="sc-loader sc-loader-spin sc-loader-sm sc-loader-muted" role="status" aria-label="Carregando"></span>
                <span class="sc-loader sc-loader-spin sc-loader-lg" role="status" aria-label="Carregando"></span>
              </div>
Classes, JavaScript e API
sc-loadersc-loader-spinsc-loader-smsc-loader-mutedsc-loader-lg

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Dots

Dots, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; gap:18px; flex-wrap:wrap; align-items:center;">
                <span class="sc-loader sc-loader-dots" role="status" aria-label="Carregando">
                  <span></span><span></span><span></span>
                </span>
                <span class="sc-loader sc-loader-dots sc-loader-muted" role="status" aria-label="Carregando">
                  <span></span><span></span><span></span>
                </span>
              </div>
Classes, JavaScript e API
sc-loadersc-loader-dotssc-loader-muted

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Bars

Bars, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; gap:18px; flex-wrap:wrap; align-items:center;">
                <span class="sc-loader sc-loader-bars" role="status" aria-label="Carregando">
                  <span></span><span></span><span></span>
                </span>
                <span class="sc-loader sc-loader-bars sc-loader-muted" role="status" aria-label="Carregando">
                  <span></span><span></span><span></span>
                </span>
              </div>
Classes, JavaScript e API
sc-loadersc-loader-barssc-loader-muted

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Orbit

Orbit, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; gap:18px; flex-wrap:wrap; align-items:center;">
                <span class="sc-loader sc-loader-orbit" role="status" aria-label="Carregando"><span aria-hidden="true"></span></span>
                <span class="sc-loader sc-loader-orbit sc-loader-muted" role="status" aria-label="Carregando"><span aria-hidden="true"></span></span>
              </div>
Classes, JavaScript e API
sc-loadersc-loader-orbitsc-loader-muted

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Ring

Ring, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div style="display:flex; gap:18px; flex-wrap:wrap; align-items:center;">
                <span class="sc-loader sc-loader-ring" role="status" aria-label="Carregando"></span>
                <span class="sc-loader sc-loader-ring sc-loader-muted" role="status" aria-label="Carregando"></span>
              </div>
Classes, JavaScript e API
sc-loadersc-loader-ringsc-loader-muted

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Skeleton

Skeleton, preservado do laboratório original e isolado para uso e teste independente.

#
Link direto →
HTML e exemplo
<div class="sc-card sc-card-outline" style="display:grid; gap:10px;">
                <div class="sc-skeleton sc-skeleton-card"></div>
                <div class="sc-skeleton sc-skeleton-lg" style="width: 70%;"></div>
                <div class="sc-skeleton" style="width: 92%;"></div>
                <div class="sc-skeleton" style="width: 84%;"></div>
                <div style="display:flex; gap:10px; align-items:center; margin-top: 6px;">
                  <div class="sc-skeleton sc-skeleton-sm" style="width: 90px;"></div>
                  <div class="sc-skeleton sc-skeleton-sm" style="width: 60px;"></div>
                </div>
              </div>
Classes, JavaScript e API
sc-cardsc-card-outlinesc-skeletonsc-skeleton-cardsc-skeleton-lgsc-skeleton-sm

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Foco visível e ordem de leitura preservados.
  • Rótulos acessíveis devem acompanhar controles sem texto.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

INLINE · stable

Orbit

Orbit, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-showcase-loader sc-showcase-loader-1" role="status" aria-label="Carregando"><i></i><i></i><i></i><span>Orbit</span></div>
Classes, JavaScript e API
sc-showcase-loadersc-showcase-loader-1

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

INLINE · stable

Signal bars

Signal bars, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-showcase-loader sc-showcase-loader-2" role="status" aria-label="Carregando"><i></i><i></i><i></i><span>Signal bars</span></div>
Classes, JavaScript e API
sc-showcase-loadersc-showcase-loader-2

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

INLINE · stable

Progress ring

Progress ring, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-showcase-loader sc-showcase-loader-3" role="status" aria-label="Carregando"><i></i><i></i><i></i><span>Progress ring</span></div>
Classes, JavaScript e API
sc-showcase-loadersc-showcase-loader-3

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

INLINE · stable

Skeleton page

Skeleton page, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<div class="sc-showcase-loader sc-showcase-loader-4" role="status" aria-label="Carregando"><i></i><i></i><i></i><span>Skeleton page</span></div>
Classes, JavaScript e API
sc-showcase-loadersc-showcase-loader-4

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Possui fallback para prefers-reduced-motion.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Banner →Toast →Progresso →Skeleton →