El tiempo es oro, por eso ayuda que tu audiencia sepa cuánto tardará, por ejemplo, en leer una entrada de blog. Con la Interaction 2.0 de Webflow, vamos a crear una barra de progreso de página y una llamada a la acción para compartir.
Ya sea instalando un programa, transfiriendo archivos o subiendo vídeos, las barras de progreso dan a los usuarios una sensación de avance al enmarcar la duración de la interacción. En este artículo, te mostraremos cómo crear una barra de progreso usando la Interaction 2.0 de Webflow.
¿Qué es una barra de progreso?
Una barra de progreso es un gráfico informático que ofrece una representación visual del tiempo que falta para completar una tarea. Puedes crear barras de progreso usando una gran variedad de lenguajes de programación como HTML y CSS, así como frameworks como Bootstrap.
Tutorial de tres pasos para una barra de progreso
El tiempo es oro, por eso ayuda que tu audiencia sepa cuánto tardará en completar tareas como leer una entrada de blog. Regístrate para obtener una cuenta gratuita y así podrás crear una barra de progreso de página y una llamada a la acción usando la Interaction 2.0 de Webflow.
Nota: para este tutorial, asumimos que has configurado una fuente predeterminada en el cuerpo (body).
Paso 1: Añadir y dar estilo al div contenedor
Coloca un div en el lienzo, asígnale la clase "Progress Wrapper" y aplica estos ajustes:
- Ajustes de visualización: Flex
- Diseño Flex: Vertical
- Justificar: Inicio (Start)
- Alinear: Centro
En nuestro caso, añadimos un relleno (padding) superior de "95px", pero es porque tenemos una barra de navegación que no queremos que se superponga a la barra de progreso. Siéntete libre de ajustar este valor para que encaje con tu diseño.
- Relleno inferior (Padding Bottom): 40px
- Ancho: 30px
- Altura: 100vh
- Posición: Fija, Izquierda.
- Z-index: 9999
A continuación, haz clic en el modo de visualización Tablet en el diseñador.
Con el Progress Wrapper seleccionado, cambia el ancho a “20px”. Vuelve a la vista de escritorio y seguiremos dando estilo y añadiendo elementos.
Nota sobre la configuración móvil: Al visualizarlo en dispositivos móviles, es posible que la barra de progreso quede un poco cerca del contenido de texto. Si este es el caso, como en el ejemplo de abajo, añade un relleno (Padding) adicional al cuerpo (Body) de la página. Yo he añadido “30px” en Tablet, lo he bajado a “20px” en móvil horizontal y lo he eliminado por completo en móvil vertical para lograr un espacio y una composición más cómodos.
Añade un “Bloque de texto” dentro del Progress Wrapper y cambia el texto a “0%”.
Añade la clase “Percent” al bloque de texto y utiliza los siguientes ajustes:
- Margen derecho: 1.5px
- Grosor de fuente: 500 - Medio
- Color de fuente: #ff1657
- Tamaño de fuente: 9px
- Altura de línea: 9px
- Transformaciones: Rotar Z 90°
A continuación, añade un div al Progress Wrapper debajo del bloque de texto del 0%, asígnale la clase “Progress Track” y utiliza estos ajustes:
- Elemento flexible: Expandir
- Relleno (superior, derecho e izquierdo): 5px
- Relleno (inferior): 10px
- Ancho: 5px
Añade un div dentro del div de la pista de progreso (progress track), asígnale la clase Progress Bar y añade estos ajustes:
- Altura: 1%
- Color de fondo: #ff1657
- Radio del borde (todos los lados): 2px
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Copia el bloque de texto “0%” que creamos antes haciendo clic derecho y seleccionando Copiar en el menú desplegable. Luego, vuelve a hacer clic derecho en el div Progress Wrapper y selecciona Pegar dentro en el menú desplegable.
Haz doble clic en el bloque de texto recién colocado y cambia el contenido a “100%”.
Paso 2: Añade la llamada a la acción
¡Ya estamos en la recta final! Añade un div debajo del bloque de texto “100%” y asígnale la clase “Share Post” usando estos ajustes:
- Ajuste de visualización: Flex
- Diseño Flex: Horizontal
- Justificar: Inicio (Start)
- Alinear: Estirar
- Relleno (superior, derecho e inferior): 5px
- Relleno (izquierdo): 10px
- Ancho: 255px
Ajustes de posición:
- Posición: Absoluta, inferior izquierda
- Izquierda: 25px
- Inferior: 30px
- Color de fuente: Blanco
- Color de fondo: #ff1657
- Radio del borde: 2px
Añade un bloque de texto en el div Share Post y reemplaza el texto por “¿Te ha gustado este post? ¡Compártelo!” Selecciona el texto “¡Compártelo!” y ponlo en negrita.
A continuación, añade el “Twitter Widget” de Webflow. Desmarca la casilla “Show Bubble” y asígnale la clase “Share Button”.
Añade los siguientes ajustes:
- Relleno (izquierdo): 5px
- Altura: 21px
Paso 3: Añade las interacciones
Ve al panel de Interacciones y selecciona el icono de más en la sección En la página actual. En el menú desplegable, elige Mientras la página se desplaza.
En el menú desplegable Acción, selecciona Reproducir animación de desplazamiento y cambia la Suavización a "90%". Por último, haz clic en el icono de más y renombra la interacción como "Activador de barra de progreso".
A continuación, selecciona el div de la barra de progreso y haz clic en el icono de más junto a Acciones de desplazamiento. Selecciona Tamaño en el menú desplegable, elige la interacción en la posición 0% del panel de animación y añade una altura del "1%". Ahora, selecciona la interacción en la posición 100% y cambia la Altura al "100%".
¡Ya puedes probarlo si quieres!
Después, selecciona el div Compartir publicación, pasa el cursor sobre el icono de más en la posición 0% del panel de animación y selecciona Opacidad en el menú desplegable. Ajústala al "0% de opacidad".
Añade otro punto de interacción alrededor de la marca del 85% en el panel de animación y, de nuevo, selecciona Opacidad en el menú desplegable. Ajústala al "0% de opacidad".
Por último, añade la última interacción en la posición 100% del panel de animación eligiendo Opacidad en el menú desplegable. Una vez seleccionada, deja el nivel de opacidad predeterminado al "100%".
¡Listo! ¡Publícalo y pruébalo!
