Progress bar

El estilo de la barra de progreso nos permite ver el progreso en la aplicación web.

Example

Open in new tab

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

Usage

The sliding door structure is designed to be fixed in the viewport. The sliding door frame has CSS "absolute" position with vertical scroll in both the fixed and sliding doors. Inside a sliding door, elements with class name .nkn-sliding-door-open are visible only when the sliding door is open. The sliding door can be configured to show on the LH or RH side of the structure by applying class name nkn-opens-left or nkn-opens-right to the sliding door frame.

CSS class names.

Class Description
"nkn-progress-bar" Clase para el contenedor de la barra de progreso.
"nkn-heading" Es la clase para cabecera de la barra de progreso.
"nkn-icon-item-progress-bar" Parte de la cabecera, donde el usuario puede personalizar su icono.
"nkn-title" Parte de la cabecera donota el título.
"nkn-description" Para la descripción de un paso de la barra de progreso.
"nkn-focus-link" Para enfocar la parte de la barra de progreso que estoy actualmente.
"nkn-completed" Es el estilo que indica que se a completado un item de la barra de progreso.