.loader
View Compiled
.loader {
width: 0%;
height: 10px;
background-color: red;
}
View Compiled
loader =
steps: 0
current_step: 0
init: (s) ->
@steps = s
@current_step = 0
$('.loader').css('width', '0%').show()
progress: (step) ->
if step
@current_step = step
else
@current_step++
w = 100 / @steps * @current_step + '%'
l = $('.loader')
l.animate
width: w
, 2000 / @steps, =>
if @current_step is @steps
l.fadeOut()
# Tests
loader.init(5)
loader.progress()
loader.progress()
# Usage
# loader.init(5)
# Initialize loader with 5 steps in total
# loader.progress()
# Animate one step further
# loader.progress(3)
# Animate to step 3
View Compiled
This Pen doesn't use any external CSS resources.