Gerador de Barra de Progresso HTML
Gere uma barra <progress> — defina o valor máximo/atual, um rótulo opcional e o modo indeterminado (carregamento), depois copie o HTML pronto para uso. Gratuito, instantâneo, sem IA.
Entrada
Configurações
A barra de progresso mostra um estado de carregamento sem valor conhecido.
Adicione classes CSS personalizadas ao elemento. Separe várias classes com espaços.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/html-generator/progress \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"customMax": "100",
"customValue": "35",
"customLabel": "",
"customIndeterminate": "",
"customClasses": ""
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `html-generator__progress` tool (HTML Progress Bar Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/html-generator/progress/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Barra de Progresso HTML — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
Crie uma barra <progress> pronta para colar — defina o valor máximo e o atual, um rótulo opcional e o modo indeterminado (carregamento), depois copie o HTML gerado.
Executa inteiramente no seu navegador: sem chamada de IA, sem créditos, sem ida e volta à rede. A saída é atualizada instantaneamente enquanto você digita.
Como usar
- Defina o Valor máximo e o Valor atual (ou mantenha os padrões).
- Opcionalmente, adicione um Rótulo ou marque Indeterminado para uma barra de carregamento sem valor conhecido.
- Copie ou baixe o HTML gerado.
Por que não há pré-visualização ao vivo?
A saída é marcação real, sem sanitização (<progress>, <label>) — renderizá-la diretamente na página não é seguro. Cole o código na sua própria página para vê-lo em contexto.