Slim Progress Bar con puro CSS-progre (c) SS

Vista prévia

Descripción

progre (c) SS es una solución CSS pura que le permite crear varios tipos de barra de progreso utilizando HTML5 datos atributos y animaciones CSS3. También viene con un ayudante de JavaScript para manejar sus barras de progreso.

Funcionamiento

Cargue la hoja de estilo principal en la sección Head de su página web.

<link href="dist/progrecss.css" rel="stylesheet">

Añade la clase CSS ' progrecss ' a cualquier elemento y usa Data-progrecss especifica el porcentaje para la barra de progreso.

• Data-progrecss: definir el porcentaje de terminación
• Data-progrecss-Mock: toma un valor numérico que define la duración de cuánto tiempo debe tardar el progreso de la burla en segundos (hasta 120).
• Data-progrecss-Timer: toma un valor numérico que define la duración de cuánto tiempo debe tomar el temporizador en segundos (hasta 120).
• Data-progrecss-Duration: toma un valor numérico que define la duración de las transiciones de progrecss.

<div class="progrecss" data-progrecss="80">
</div>

Eso es todo. Aquí está una lista de CSS completa ayuda.

// Positioning classes
top(default): The default positioning for a progrecss bar is at the top of an element.
bottom: Positions the progrecss bar at the bottom of the element.
fixed: Gives a fixed position of 0,0 relative to the container of the element.

// Color classes
blue(default)
green
red
purple
orange
yellow

// Behavioural classes
reverse: will reverse the direction of a keyframe based progrecss bar (mock/timer).
pause: will pause a keyframe based progrecss bar (mock/timer).

// Mocking classes
mock: required in order to initiate a mock.
staggered: will stagger the mock halting at different percentages (can be customised by altering source files).

// Timer classes
timer: required in order to initiate a timer.

Use las aplicaciones auxiliares de JavaScript para actualizar el porcentaje.

var myprogrecss = new progrecss (document.body, {



// 'green', 'red', 'blue', 'purple', 'orange', 'yellow'.


color: 'red',



// number - 0 to 100.


percent: 0,



// string - 'fixed', 'top', 'bottom'.


position: 'fixed',



// will reverse the direction of keyframe based progrecss bars.


reverse: true,



// object consisting of mock, mockDuration, and staggered


mock: {





// defines whether the mock will stagger.




staggered: true,





// defines whether the progrecss bar will mock straight away.




startMockOnCreate: false,





// defines how long the mock will take in seconds.




mockDuration: 5


}
})

Métodos públicos.

// sets percentage that progrecss is complete.
setprogrecss(number percent)

// will initiate a progrecss bar mock based on the options passed in.
startMock()

 // will toggle the play state of a keyframe based progrecss bar.
togglePause()

// will pause a keyframe based progrecss bar.
pause()

// will play a keyframe based progrecss bar.
play()

Registro de cambios

v2.0.6 (07/19/2018)

• Bugfix