Skip to content

Instantly share code, notes, and snippets.

@ethagnawl
Last active December 15, 2015 05:29
Show Gist options
  • Save ethagnawl/5209401 to your computer and use it in GitHub Desktop.
Save ethagnawl/5209401 to your computer and use it in GitHub Desktop.
EasyLoader is a cross-browser, mobile-friendly, customizable loading pacifier. http://jsfiddle.net/ethagnawl/6LJW6/1/
class EasyLoader
constructor: (@DOT = '.', @TIMEOUT_LENGTH = 400, @MAX_NUMBER_OF_DOTS = 3) ->
@loading_message_timeout = true
render: ->
style_hash =
'left': '0'
'padding': '12px'
'position': 'absolute'
'text-align': 'center'
'top': '0'
'width': '100%'
'-moz-box-sizing': 'border-box'
'-webkit-box-sizing': 'border-box'
'box-sizing': 'border-box'
styles = ''
styles += "#{k}:#{v};" for k,v of style_hash
loading_message_id = "loading_message_#{new Date().getMilliseconds()}"
loading_message = """
<div id='#{loading_message_id}' style='#{styles}'>#{@DOT}</div>
"""
loading_message_wrapper = document.createElement('div')
loading_message_wrapper.innerHTML = loading_message
document.getElementsByTagName('body')[0].appendChild(loading_message_wrapper)
@el = document.getElementById(loading_message_id)
start: ->
if @loading_message_timeout
do @render unless @el
dots = @el.innerHTML.split('')
if dots.length < @MAX_NUMBER_OF_DOTS
dots.push(@DOT)
@el.innerHTML = dots.join('')
else if dots.length is @MAX_NUMBER_OF_DOTS
@el.innerHTML = @DOT
@loading_message_timeout = setTimeout =>
do @start
, @TIMEOUT_LENGTH
else
@loading_message_timeout = !!@loading_message_timeout
stop: ->
clearTimeout(@loading_message_timeout)
setTimeout =>
@el.parentNode.removeChild(@el)
@loading_message_timeout = true
@el = null
, @TIMEOUT_LENGTH
easy_loader = new EasyLoader
easy_loader.start()
async_thing(-> easy_loader.stop())
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment