A Pen by Riley Shaw.

ASCII-loading-animations.markdown

ASCII loading animations

Geeky loading animations using ASCII characters, inspired by http://zanstra.com/base/picks/progress

A Pen by Riley Shaw on CodePen.

License.

index.slim

#v-align
  - for i in 1..4
    .progress

script.coffee

seqs = [
        ['bq', 'dp', 'qb', 'pd'],
        ['bo', 'do', 'ob', 'od', 'oq', 'op', 'qo', 'po'],
        ['o', 'O', '0', 'O'],
        ['-', '—', '--', '——', '---', '———', '---', '——', '--', '—']
]

cycle = (el, seq, i = 0) ->
  el.text(seq[i %= seq.length])
  setTimeout(cycle, 150, el, seq, ++i)

($ '.progress').each (i) ->
  cycle ($ this), seqs[i]

style.sass

@import "compass"
body
  background: #334
  
#v-align
  position: absolute
  top: 50%
  width: 100%
  text-align: center
  div
    display: inline-block
    height: 60px
    width: 60px
    margin: -30px 30px 0
    font: 20px/60px monospace
    text-align: center
    color: #224
    background: #8cc
    +border-radius(30px)