Timeline Horizontal

Timeline horizontal com dots conectados por uma linha, cards de conteudo e scroll nativo para muitos itens.

components/timeline-horizontal.cssAbrir no Figma

Uso

Quando e como utilizar a timeline horizontal para representar sequencias temporais.

• Completed — Etapa concluida com sucesso (dot verde).
• Pending — Etapa pendente ou em andamento (dot amarelo).
• Error — Etapa com falha ou bloqueio (dot vermelho).
• Warning — Etapa que requer atencao (dot amarelo).
• Empty — Quando nao ha itens para exibir, mostra mensagem de estado vazio.

Exemplos

Veja abaixo os exemplos interativos da timeline horizontal, com dados de CSV, JSON, inline e HTML estatico.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	.timeline-horizontal	Wrapper principal do componente
Titulo	.timeline-horizontal__title	Titulo da timeline, Inter 16px w600
Track	.timeline-horizontal__track	Faixa com scroll horizontal, linha conectora e scroll-snap
Item	.timeline-horizontal__item	Coluna individual com 280px fixo e snap alignment
Dot	.timeline-horizontal__dot	Circulo indicador de status sobre a linha conectora
Card	.timeline-horizontal__card	Card de conteudo posicionado abaixo do dot
Card Title	.timeline-horizontal__card-title	Titulo do item, Inter 14px w500
Date	.timeline-horizontal__date	Data formatada, Inter 12px w400
Description	.timeline-horizontal__description	Texto descritivo do item
Empty	.timeline-horizontal__empty	Mensagem exibida quando nao ha itens

Propriedades

Classes disponiveis para configurar a timeline horizontal.

Propriedade	Tipo	Default	Descrição
.timeline-horizontal	classe	—	Container principal.
.timeline-horizontal__title	classe	—	Titulo da timeline.
.timeline-horizontal__track	classe	—	Wrapper com scroll horizontal e linha conectora.
.timeline-horizontal__item	classe	—	Item individual (280px fixo, scroll-snap).
.timeline-horizontal__dot	classe	—	Circulo indicador de status.
.timeline-horizontal__dot--completed	classe	—	Concluido (verde).
.timeline-horizontal__dot--pending	classe	—	Pendente (amarelo).
.timeline-horizontal__dot--error	classe	—	Erro (vermelho).
.timeline-horizontal__dot--warning	classe	—	Atencao (amarelo).
.timeline-horizontal__card	classe	—	Card de conteudo abaixo do dot.
.timeline-horizontal__card-title	classe	—	Titulo do item.
.timeline-horizontal__date	classe	—	Data formatada.
.timeline-horizontal__description	classe	—	Descricao do item.
.timeline-horizontal__empty	classe	—	Estado vazio.

Codigo

Snippets prontos para copiar e usar no seu projeto.

HTML estatico

<div class="timeline-horizontal">
  <h3 class="timeline-horizontal__title">Etapas do Processo</h3>
  <div class="timeline-horizontal__track">
    <div class="timeline-horizontal__item">
      <div class="timeline-horizontal__dot timeline-horizontal__dot--completed"></div>
      <div class="timeline-horizontal__card">
        <h4 class="timeline-horizontal__card-title">Abertura do processo</h4>
        <div class="timeline-horizontal__date">01/03/2025</div>
        <p class="timeline-horizontal__description">Protocolo registrado no sistema.</p>
      </div>
    </div>
    <div class="timeline-horizontal__item">
      <div class="timeline-horizontal__dot timeline-horizontal__dot--completed"></div>
      <div class="timeline-horizontal__card">
        <h4 class="timeline-horizontal__card-title">Analise documental</h4>
        <div class="timeline-horizontal__date">08/03/2025</div>
        <p class="timeline-horizontal__description">Documentos conferidos e validados.</p>
      </div>
    </div>
    <div class="timeline-horizontal__item">
      <div class="timeline-horizontal__dot timeline-horizontal__dot--pending"></div>
      <div class="timeline-horizontal__card">
        <h4 class="timeline-horizontal__card-title">Parecer tecnico</h4>
        <div class="timeline-horizontal__date">15/03/2025</div>
        <p class="timeline-horizontal__description">Aguardando avaliacao do setor responsavel.</p>
      </div>
    </div>
    <div class="timeline-horizontal__item">
      <div class="timeline-horizontal__dot timeline-horizontal__dot--error"></div>
      <div class="timeline-horizontal__card">
        <h4 class="timeline-horizontal__card-title">Decisao final</h4>
        <div class="timeline-horizontal__date">22/03/2025</div>
        <p class="timeline-horizontal__description">Encaminhamento para aprovacao.</p>
      </div>
    </div>
  </div>
</div>

Com DataLoader

import { DataLoader } from '../../src/core/data-loader.js';
import { renderTimelineHorizontal } from '../../src/components/timeline-horizontal.js';

const data = await DataLoader.load({
  endpoint: '/data/timeline/processo-etapas.json'
});

renderTimelineHorizontal(
  document.getElementById('timeline-json'),
  data,
  { title: 'etapa', date: 'data', status: 'situacao', description: 'descricao' },
  { title: 'Etapas do Processo' }
);

Com Factory (auto-init)

<div
  data-arenito="timeline-horizontal"
  data-endpoint="/data/timeline/processo-etapas.json"
  data-title="Etapas do Processo"
  data-mapping='{"title":"etapa","date":"data","status":"situacao","description":"descricao"}'
></div>

Fonte de Dados

A timeline aceita dados de diferentes origens via DataLoader.

CSV

const data = await DataLoader.load({
  endpoint: '/data/timeline/historico-fiscal.csv',
  csvOptions: { delimiter: ';' }
});

renderTimelineHorizontal(el, data,
  { title: 'titulo', date: 'data', status: 'status', description: 'descricao' },
  { title: 'Historico Fiscal' }
);

JSON

const data = await DataLoader.load({
  endpoint: '/data/timeline/processo-etapas.json'
});

renderTimelineHorizontal(el, data,
  { title: 'etapa', date: 'data', status: 'situacao', description: 'descricao' },
  { title: 'Etapas do Processo' }
);

API / Inline

const inlineData = [
  { etapa: 'Solicitacao', data: '2025-01-10', situacao: 'concluido', descricao: 'Pedido registrado.' },
  { etapa: 'Triagem',     data: '2025-01-12', situacao: 'concluido', descricao: 'Demanda classificada.' },
  { etapa: 'Execucao',    data: '2025-01-18', situacao: 'pendente',  descricao: 'Equipe em andamento.' },
  { etapa: 'Entrega',     data: '2025-01-25', situacao: 'pendente',  descricao: 'Aguardando finalizacao.' }
];

renderTimelineHorizontal(el, inlineData,
  { title: 'etapa', date: 'data', status: 'situacao', description: 'descricao' },
  { title: 'Fluxo de Atendimento' }
);

Dark Mode

O componente respeita os tokens semanticos globais e alterna automaticamente ao aplicar a classe .dark no container raiz.

• Backgrounds, bordas e textos herdam os tokens do tema.
• Os dots de status mantêm suas cores semanticas em ambos os temas.
• A linha conectora do track ajusta sua cor via variavel de borda.

Versão0.2.0

Última atualização14 mar 2026

Caminhosrc/components/timeline-horizontal.css