Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

HTML

Publicado por jason limmm
jason limmm
8,009 puntos

no tengo idea de cómo hacer una barra de progreso

<!DOCTYPE html>

<html>
    <head>
        <title>Formulario</title>
        <link rel=preconnect href=https://fonts.googleapis.com>
        <link rel=preconnect href=https://fonts.gstatic.com crossorigin>
        <link href=https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap rel=stylesheet>
        <link rel=stylesheet href=style.css>
    </head>
    <body>
        <div class=flex form id=nombre>
            <div id=contents>
                <h1>Cuéntanos un poco sobre ti.</h1>
            </div>
        </div>
    </body>
</html>

body{
    background-color:#DEF3F1;
    font-family: Inter, sans-serif;
    font-optical-sizing: automático;
    font-weight: 300;
    font-style: normal;
}
.flex{
    mostrar:flex;
}
#form{
    border-radius: 5px;
    background-color:#FFF;
    min-width: 100px;
    max-width:800px;
    margen:0 automático;
    flex-direction: columna;
}
#contents{
    margen: 0 automático;
}

estoy intentando descubrir cómo hacer una barra de progreso para una aventura de código que comencé pero no sé cómo empezar y cómo hacer que progrese a medida que avanza el formulario

2 Respuestas

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

HTML incluye un elemento <progress>. Ver esta página de MDN para detalles y un ejemplo de uso.

Además, este segmento debido Episodio 129 de "The Treehouse Show" tiene un ejemplo de creación de barras de progreso utilizando una biblioteca de código de Google.

Actualizar el progreso requerirá algún tipo de código asincrónico, posiblemente usando un controlador ProgressEvent.

Rohald van Merode
sello-máscara
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
JavaScript Full Stack Estudiante de Techdegree 9.277 Puntos
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
JavaScript Full Stack Estudiante de Techdegree 9.277 Puntos

Hola jason limmm 👋

Hay una etiqueta especial para barras de progreso que podrías usar para este propósito 🙂

¡Espero que esto te ayude!