Desplazamiento de página indicador de progreso de lectura con Progress. js

Vista prévia

Descripción

Progress. js es una pequeña biblioteca de JavaScript que genera una barra de progreso basada en SVG animada y circular para indicar el progreso de la lectura a medida que se desplaza hacia abajo por la página.

Funcionamiento

Cargue el Progress. js al final del documento.

<script src="path/to/progress.min.js"></script>

Cree una barra de progreso circular con el elemento SVG.

<div class="progress-indicator">

<svg>


<g>



<circle cx="0" cy="0" r="20" stroke="black" class="animated-circle" transform="translate(50,50) rotate(-90)">


</g>


<g>



<circle cx="0" cy="0" r="38" transform="translate(50,50) rotate(-90)">


</g>

</svg>

<div class="progress-count"></div>
</div>

Un pequeño CSS para el estilo del indicador de progreso.

.progress-indicator {

position: fixed;

top: 10px;

right: 20px;

width: 100px;

height: 100px;

z-index: 20;
}

.progress-count {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

text-align: center;

line-height: 100px;

color: #0082FF;
}

svg { position: absolute; }

circle { fill: rgba(255,255,255,0.9); }

svg .animated-circle {

fill: transparent;

stroke-width: 40px;

stroke: #0A74DA;

stroke-dasharray: 126;

stroke-dashoffset: 126;
}

Eso es todo. El indicador de progreso se actualizará automáticamente en función de la profundidad de desplazamiento.

Registro de cambios

12/17/2015

• Usado. map () en lugar de bucle for