#progre(c)ss
###Pure CSS progress bars with minimal effort
- Include the stylesheet.
- Add the class
progrecssto your element (any element) - Add a data attribute
data-progrecssdefining the completion percentage (1 to 100).
That's it!
<div class="progrecss" data-progrecss="77">
My first progre(c)ss!
</div>From what I can gather having a look at caniuse, progre(c)ss should be fully supported from IE10 up. This is purely because of transition, but if I remember rightly this can be shimmed.
You can easily mock the progress bar by using keyframe animations as is does in the demo.
@keyframes progress {
0% { width: 0%; }
100% { width: 100%; }
}
// you could also stage this using different percentages etc.Then apply the keyframe animation to the :after of the progre(c)ss with the amount of time you want it to take.
.progrecss:after {
animation: progress 5s;
}See issue #2, this is due to be out of the box as standard.
There are some additional helper classes which can be used to add colors and positioning. Use them in combination.
######positioning
top(default) The default positioning for a progrecss bar is at the top of an element.bottomPositions the progrecss bar at the bottom of the element.fixedGives a fixed position of0,0relative to the container of the element.
######colors
green(default)blueredpurpleorangeyellow
progre(c)ss is developed with less/sass making the actual amount of code written minimal in order to generate the stylesheet by making use of looping.
When using the less/sass 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)
Any suggestions, improvements or issues are welcome. :)
@jh3y
MIT
Copyright (c) 2014 @jh3y