Back to Top con indicador de progreso

¿Cómo agregar un indicador de progreso al botón de ir arriba o scroll up en tu sitio web?

Una buena práctica para el diseño de un sitio web es agregar un botón para subir arriba (al costado derecho o izquierdo), así los usuarios no tienen que volver a hacer scroll para ir al principio del sitio web.

Si bien es común utilizar menúes fijos al hacer scroll nunca está demás esta clase de herramientas.

En este ejemplo vamos a mostrar como hacer un scroll up pero con el excelente agregado de ir mostrando un progreso mientras se va bajando por la web.

Para ello vamos a necesitar agregar por supuesto código HTML y CSS pero también Javascript a nuestra web.

Es indispensable para que funcione correctamente que se utilicen las siguientes librerías:

Bootstrap  para el diseño responsive y alineación (https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css)

Unicons para el ícono de subir  (https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css)

Jquery para que funcione sl scroll y el indicador de progreso (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js)

Así tu sitio web tengrá un excelente indicador en el scroll up!