Uma animação de carregamento feita com o seu próprio logo.
Envie o símbolo do seu logo. O estado loading é um loop perfeito do seu logo exatamente como ele é e, quando a espera acaba, pode tocar uma reação de success ou error e voltar ao repouso. Use o .riv para um loader que reage, WebM e MOV transparentes para sobreposições, e MP4 ou GIF onde só um arquivo simples funciona.
Este é o .riv real que nosso motor entrega, rodando no seu navegador. É a mesma state machine que você controla no seu app com um input numérico e um trigger para cada reação única.
Espere e depois mostre o resultado
const vm = r.viewModelInstance; // Character view model
vm.number("mood").value = 5; // loading loop
try {
await save();
vm.number("mood").value = 0; // rest on idle after the reaction
vm.trigger("success").trigger(); // plays once
} catch {
vm.number("mood").value = 0;
vm.trigger("error").trigger();
}
Um trigger toca uma vez e volta ao humor atual, então o logo sempre volta ao repouso em idle.
Bom saber
É um loader indeterminado: não há input de porcentagem concluída. Para esperas longas, combine com uma barra de progresso ou um texto.
Seu logo é animado do jeito que ele é. Não é um spinner em CSS, SVG ou Lottie.
Os GIFs vêm com fundo sólido; não existe GIF transparente. Sobre imagens ou vídeo, use o .riv ou o WebM com um MOV HEVC para o Safari.
Componentes para web, React e SwiftUI com o nome do seu personagem.
Formatos incluídos em cada plano
Formato
Especificações
Ideal para
Starter & All in one
MP4
1080 × 1080, 60 fps, todas as 17 animações
Apps, redes sociais, apresentações, vídeos de produto
Incluído
Vídeo de abertura 9:16
MP4 1080 × 1920
Stories, Reels, splash screens
Incluído
GIF
Prévias de 480 px, fundo sólido
Documentação, e-mail, chat, README
Incluído
Rive (.riv)
Vetorial; view model com Data Binding + inputs legados: mood para os loops, triggers para as reações únicas e uma state machine para a intro de abertura
Apps e sites interativos (web, iOS, Android, Flutter)
Incluído
WebM com fundo transparente
VP9 com canal alfa, 1080 × 1080
Sobreposições na web sobre qualquer fundo
Incluído
MOV com fundo transparente
HEVC com canal alfa
Final Cut, Keynote, iOS, Safari
Incluído
Código
Componentes para web (HTML), React e SwiftUI
Cole e publique
Incluído
Baixar tudo (.zip)
Arquivo Rive, código, README e pôsteres em um só arquivo
Entrega para o seu time
Incluído
Exportação de vídeo
MP4, GIF, WebM e MOV transparentes, 9:16: escolha formatos e animações na página do conjunto, prontos em cerca de um minuto
Comece grátis. Faça upgrade quando precisar de mais.
Um loader que reage quando o trabalho termina precisa do .riv, e um loader sobre o conteúdo da página precisa de WebM ou MOV transparente: os dois estão em todos os planos pagos, a partir do Starter (US$ 20/mês). Todo conjunto também tem o loop em MP4 e GIF com fundo sólido. Preços em USD; os impostos são calculados no checkout pela Creem.
Posso usar um loader de logo como preloader no WordPress, Webflow ou Framer?
Sim. O Webflow reproduz o .riv nativamente, e o Framer pelo plugin oficial do Rive. O WordPress precisa de um plugin do Rive ou de um embed com HTML personalizado; outra opção é usar o WebM transparente com uma fonte MOV HEVC em um bloco de vídeo. Esconda o preloader assim que a página estiver pronta, não após um tempo fixo.
Existe uma versão em GIF transparente da animação de carregamento?
Não. Os GIFs vêm com fundo sólido em 480 px, o que funciona quando o loader fica sobre uma cor igual. Para um loader sobre imagens ou vídeo, use o WebM transparente no Chrome, Firefox e Edge com o MOV HEVC no Safari, ou o .riv, que é transparente em qualquer lugar.
A animação de carregamento do logo fica em loop perfeito?
Sim. O loop começa e termina na mesma pose, então não há salto na emenda no .riv, nos vídeos ou no GIF. No .riv, ele também faz a transição suave para success, error ou idle quando você muda de estado.
O loader pode mostrar o progresso em porcentagem?
Não. O estado loading é um loop indeterminado, sem input de porcentagem. Para esperas de mais de uns dez segundos, mostre uma barra de progresso ou um texto ao lado e dispare o trigger success quando o trabalho terminar.
Qual é o tamanho do arquivo de uma animação de carregamento com logo?
O .riv de um logo plano costuma ter de 35 a 45 KB para as 17 animações; logos detalhados ou 3D mantêm seus pixels, então conte com cerca de 1 MB. O runtime web do Rive vem à parte (cerca de 373 KB com brotli na build canvas-lite). Se o loader nunca precisar reagir, um único loop em WebM transparente dispensa o runtime.
Arquivo Rive ao vivo
