METADAX Loader - Documentação Oficial

📦 Instalação

Via CDN (Recomendado)

A forma mais rápida e confiável de usar o METADAX Loader:

🚀 Performance

CDN global com cache otimizado e compressão Gzip para carregamento instantâneo.

🔒 Segurança

HTTPS seguro com certificados SSL válidos e infraestrutura confiável.

📱 Responsivo

Funciona perfeitamente em todos os dispositivos e tamanhos de tela.

⚙️ Configuração

Configuração Básica

MetadaxLoader.init({ logoUrl: '/assets/images/metadax_p.svg', // URL da sua logo duration: 2500, // Duração mínima em ms autoHide: true // Ocultar automaticamente });

Configuração Avançada

MetadaxLoader.init({ // Configurações básicas logoUrl: '/assets/images/metadax_p.svg', duration: 3000, fadeOut: 600, autoHide: true, // Personalização visual logoSize: '280px', circleColor: '#0056B3', // Alterado para a cor primária da METADAX backgroundColor: '#ffffff', // Callbacks onShow: () => { console.log('Loader iniciado'); // Seu código aqui }, onHide: () => { console.log('Loader finalizado'); // Seu código aqui } });

Parâmetros de Configuração

logoUrl

Tipo: String
Padrão: '/assets/images/metadax_b.svg'
URL da imagem da logo (PNG, JPG, SVG)

duration

Tipo: Number
Padrão: 2500
Duração mínima do loader em milissegundos

fadeOut

Tipo: Number
Padrão: 600
Tempo de transição de saída em ms

autoHide

Tipo: Boolean
Padrão: true
Ocultar automaticamente quando a página carregar

logoSize

Tipo: String
Padrão: '280px'
Tamanho da logo (CSS width)

circleColor

Tipo: String
Padrão: '#2ECC71'
Cor do círculo de carregamento

💡 Exemplos

Exemplo 1: Integração Básica

Exemplo 2: Com Callback Personalizado

MetadaxLoader.init({ logoUrl: '/assets/images/metadax_p.svg', duration: 3000, onShow: () => { // Pausar vídeos de fundo document.querySelectorAll('video').forEach(v => v.pause()); }, onHide: () => { // Analytics gtag('event', 'page_loaded', { 'custom_parameter': 'metadax_loader_complete' }); // Iniciar animações da página startPageAnimations(); } });

Exemplo 3: Controle Manual

// Inicializar sem auto-hide MetadaxLoader.init({ logoUrl: '/assets/images/metadax_p.svg', autoHide: false }); // Controlar manualmente async function loadPageContent() { try { // Carregar dados const data = await fetch('/api/data').then(r => r.json()); // Processar conteúdo renderContent(data); // Ocultar loader MetadaxLoader.hide(); } catch (error) { console.error('Erro ao carregar:', error); MetadaxLoader.hide(); } }

📚 Referência da API

Métodos Disponíveis

MetadaxLoader.init(config)

Inicializa o loader com as configurações especificadas.

MetadaxLoader.init({ logoUrl: '/assets/images/metadax_p.svg', duration: 2500 });

MetadaxLoader.show()

Exibe o loader manualmente.

MetadaxLoader.show();

MetadaxLoader.hide()

Oculta o loader manualmente.

MetadaxLoader.hide();

MetadaxLoader.isActive()

Verifica se o loader está ativo.

if (MetadaxLoader.isActive()) { console.log('Loader ativo'); }

Recursos e Especificações

Zero dependências externas
Compatível com IE11+ e todos navegadores modernos
Tamanho minificado: ~3KB gzipped
Suporte a logos PNG, JPG e SVG
Animações CSS3 otimizadas
API Promise-based para controle assíncrono
Eventos personalizáveis
Design responsivo automático

🆘 Suporte e Comunidade

Precisa de ajuda? Nossa equipe está pronta para apoiar seu projeto.

📧 Suporte Técnico 📖 GitHub