johnsonc / progre-c-ss Goto Github PK

#progre(c)ss

###Pure CSS progress bars with minimal effort

1. Include the stylesheet (available through Bower).
2. Add the class progrecss to your element (any existing element)
3. Add a data attribute data-progrecss defining the completion percentage (1 to 100) and any optional helper data attributes and classes for your desired behaviour/position/appearance* see helpers
4. Update progrecss value if necessary using simple vanilla js or whatever suits you best!

That's it!

    <div class="progrecss" data-progrecss="77">
		My first progrecss!
	</div>

From what I can gather having a look at caniuse, progrecss should be fully supported from IE10 up. This is purely because of the transition property.

You can easily mock progress by using the helper attributes and classes. Refer here.

There are some helper classes and attributes you can add to help you out!

######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 attribute

• data-progrecss-mock - takes a number value that defines duration of how long the mocked progress should take in seconds (up to 120).

######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 attribute

• data-progrecss-timer - takes a number value that defines duration of how long the timer should take in seconds (up to 120).

######Timer classes

• timer - required in order to initiate a timer.

######Duration attribute

• data-progrecss-duration - takes a number value that defines the duration of progrecss transitions. For example, setting this attribute to 5 would mean that all transitions of progrecss values will take 5s.

######Javascript helper At the request of some people I have added a small javascript helper to the repo.

It's real simple to use. Here is an example piece of code for using it.

var myprogrecss = new progrecss (document.body, {
	color: 'red',
	percent: 0,
	position: 'fixed',
  reverse: true,
	mock: {
		staggered: true,
		startMockOnCreate: false,
		mockDuration: 5
	}
})

The following options are available;

• color - string - 'green', 'red', 'blue', 'purple', 'orange', 'yellow'.
• percent - number - 0 to 100.
• position - string - 'fixed', 'top', 'bottom'.
• mock - object consisting of mock, mockDuration, and staggered
• staggered - string - defines whether the mock will stagger.
• mockDuration - number - defines how long the mock will take in seconds.
• startMockOnCreate - bool - defines whether the progrecss bar will mock straight away.
• reverse - will reverse the direction of keyframe based progrecss bars.

And the following methods;

• setprogrecss(number percent) - sets percentage that progrecss is complete.
• startMock() - will initiate a progrecss bar mock based on the options passed in.
• togglePause() - will toggle the play state of a keyframe based progrecss bar.
• pause() - will pause a keyframe based progrecss bar.
• play() - will play a keyframe based progrecss bar.

progrecss takes advantage of CSS pseudo elements and preprocessing tools such as less and sass.

making use of pseudo elements means that we can add progrecss bars to any existing element on our page without being intrusive just by adding some attributes and classes as long as the elements pseudo elements aren't currently in use.

preprocessing tools such as less and sass mean we can write minimal code making use of looping in order to sit back and reap the benefits and drink a coffee!

You might not need all the features implemented for progrecss. You can customise the build being generated by modifying progrecss-config.json and setting features to true or false. Doing this can save some filesize.

progrecss is developed with less/sass /scss making the actual amount of code written minimal in order to generate the stylesheet by making use of looping.

When using the less/sass/scss file there are already some variables in place so you can roll out a new theme easily.

Those variables are:

• color
• height
• box-shadow
• opacity
• border-radius
• transition(-webkit-transition)
• iterations - this defines the number of iterations the mocking and duration loops will be invoked. By default this is 120. This means that for say a mock, you can define durations up to 120 seconds. You can trim down some filesize by lowering the amount of iterations.

Also to edit things like the way in which a staggered mock progress behaves you can modify the existing keyframes in place.

Any suggestions, improvements or issues are welcome. :)

@jh3y

MIT

Copyright 2014 @jh3y