Slim Progress Bar with Pure CSS – progre(c)ss

Category: Javascript , Loading | June 6, 2015
Author: jh3y
Views Total: 2,967
Official Page: Go to website
Last Update: June 6, 2015
License: MIT

Preview:

Slim Progress Bar with Pure CSS – progre(c)ss

Description:

progre(c)ss is pure CSS solution which enables you to create various types of progress bar using Html5 data attributes and CSS3 animations. Also comes with a JavaScript helper to handle your progress bars.

How to use it:

Load the core stylesheet in the head section of your web page.

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

Add the CSS class ‘progrecss’ to any element and use data-progrecss specify the percentage for the progress bar.

  • data-progrecss: defining the completion percentage
  • data-progrecss-mock: takes a number value that defines duration of how long the mocked progress should take in seconds (up to 120).
  • data-progrecss-timer: takes a number value that defines duration of how long the timer should take in seconds (up to 120).
  • data-progrecss-duration: takes a number value that defines the duration of progrecss transitions.
<div class="progrecss" data-progrecss="80">
</div>

That’s it. Here is a list of full CSS helps.

// 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 JavaScript helpers to update the percentage.

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
    }
})

Public methods.

// 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()

Changelog:

v2.0.6 (07/19/2018)

  • Bugfix

You Might Be Interested In:


Leave a Reply