Puro CSS/SASS Progress Tracker

Vista prévia

Descripción

Un simple, flexible, receptivo, generador de seguimiento de progreso CSS/SASS puro con marcadores opcionales, posiciones, direcciones y animaciones.

Construido en la parte superior del modelo Flexbox y totalmente personalizable en SCSS. No se requiere JavaScript. Perfecto para Asistente de forma, línea de tiempo, etc.

¿Cómo funciona?

Descargue e inserte el Progress-Tracker. CSS en la sección head del documento HTML.

<link rel="stylesheet" href="progress-tracker.css">

Cree un rastreador de progreso horizontal básico siguiendo la estructura HTML como esto:

<ul class="progress-tracker">

<li class="progress-step is-complete">


<span class="progress-marker"></span>

</li>

<li class="progress-step is-complete">


<span class="progress-marker"></span>

</li>

<li class="progress-step is-active">


<span class="progress-marker"></span>

</li>

<li class="progress-step">


<span class="progress-marker"></span>

</li>

<li class="progress-step">


<span class="progress-marker"></span>

</li>
</ul>

Cambiar la alineación de los marcadores.

<ul class="progress-tracker progress-tracker--center">

<ul class="progress-tracker progress-tracker--right">

Agregue un borde al rastreador de progreso.

<ul class="progress-tracker progress-tracker--border">

Crear marcadores espaciados.

<ul class="progress-tracker progress-tracker--spaced">

Agregue texto personalizado a los marcadores.

<ul class="progress-tracker progress-tracker--text">

<li class="progress-step is-complete">


<span class="progress-marker"></span>


<span class="progress-text">



<h4 class="progress-title">Step 1</h4>



Summary text explaining this step to the user


</span>

</li>


<li class="progress-step is-complete">


<span class="progress-marker"></span>


<span class="progress-text">



<h4 class="progress-title">Step 2</h4>



Summary text explaining this step to the user


</span>

</li>


<li class="progress-step is-active">


<span class="progress-marker"></span>


<span class="progress-text">



<h4 class="progress-title">Step 3</h4>



Summary text explaining this step to the user


</span>

</li>


<li class="progress-step">


<span class="progress-marker"></span>


<span class="progress-text">



<h4 class="progress-title">Step 4</h4>



Shorter summary text


</span>

</li>


<li class="progress-step">


<span class="progress-marker"></span>


<span class="progress-text">



<h4 class="progress-title">Step 5</h4>



Shorter summary text


</span>

</li>
</ul>

Utilice marcadores cuadrados en su lugar.

<ul class="progress-tracker progress-tracker--square">

Agregue animaciones de clic a los marcadores.

<ul class="progress-tracker anim-ripple">

<ul class="progress-tracker anim-ripple-large">

<ul class="progress-tracker anim-ripple-double">

Animar trazados.

<ul class="progress-tracker anim-path">

Cree un rastreador de progreso vertical.

<ul class="progress-tracker progress-tracker--vertical">