.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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js