Geeky loading animations using ASCII characters, inspired by http://zanstra.com/base/picks/progress
A Pen by Riley Shaw on CodePen.
Geeky loading animations using ASCII characters, inspired by http://zanstra.com/base/picks/progress
A Pen by Riley Shaw on CodePen.
#v-align | |
- for i in 1..4 | |
.progress |
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] |
@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) |