🎨 Tutorial: achando loaders/spinners open source pra usar em projetos
Nível 1 · 🪷 Lotófagos · ⏱️ ~5 min · Pré-requisitos: nenhum📌 Pra que serve
Loaders (aqueles spinners de carregamento) são componentes visuais que avisam o usuário que algo tá processando. Sites de loaders open source reúnem várias opções prontas, geralmente com código HTML/CSS/JS, pra você copiar e colar no seu projeto sem precisar criar do zero. Serve pra quem desenvolve site, app ou sistema e quer um loading bonito sem perder tempo.🛠️ Passo a passo
1️⃣ Procure sites de coleção de componentes open source (o post menciona um específico, mas não consegui confirmar qual foi de fato mostrado no reel — o texto extraído só trouxe a legenda, não o link).
2️⃣ Navegue pelas categorias — geralmente tem "loaders", "spinners" separados por estilo (minimalista, animado, colorido etc).
3️⃣ Escolha o modelo que combina com a identidade visual do seu projeto.
4️⃣ Copie o código (normalmente vem em HTML + CSS, às vezes com JS).
5️⃣ Cole no seu projeto e ajuste cores/tamanho conforme sua paleta.
6️⃣ Teste em diferentes telas (mobile e desktop) pra garantir que fica redondo.
⚠️ Real com vocês: o material que recebi só tinha a legenda do post do Instagram ("Powerful websites you should know... open source loaders"), sem o nome do site ou link específico mostrado no vídeo. Não vou inventar qual é — se alguém souber o nome exato, quero fechar o passo a passo com precisão. 🙏
💡 Dica prática: ao usar componentes open source, sempre confira a licença de uso (MIT, Apache etc) antes de colocar em produção
🔗 Links e instalação
⚠️ Como não foi possível extrair o conteúdo real do post (legenda, imagem ou vídeo), não há ferramentas, apps ou comandos citados para linkar aqui. Não vou inventar nomes de ferramentas ou comandos de instalação sem confirmação.
Assim que você mandar o print, a legenda ou descrever o que o post mostra, eu complemento este bloco com:
- Link oficial de cada ferramenta citada
- Comandos de instalação (ex:
npm install,pip install, etc.) quando aplicável - Documentação oficial correspondente
⚡ Comandos prontos
Não há ferramentas, apps ou comandos citados no material original para gerar comandos copiáveis. Sem a legenda, imagem ou vídeo do post, qualquer comando aqui seria inventado.
Nenhum comando disponível — conteúdo do post não foi extraído
Fonte: https://www.instagram.com/p/Da0i1JcjXRr/?igsh=MXA0YjdqeHJzemVuMA==