Skip to content

Instantly share code, notes, and snippets.

Created December 13, 2012 16:14
Show Gist options
  • Save anonymous/4277531 to your computer and use it in GitHub Desktop.
Save anonymous/4277531 to your computer and use it in GitHub Desktop.
A spin.js wrapper for jquery
$.fn.spinner = (optsOrFalse) ->
if (optsOrFalse != false)
# EVENTUALLY add small, med, large sizes for these options based on the height of the element being spun
spinSize = 25
settings = $.extend({
lines: 10
length: 5
width: 2
radius: 3
label: ''
}, optsOrFalse)
remove = false
else
settings = {}
remove = true
@each ->
$this = $(@)
data = $this.data()
if data.spinner
data.spinner.stop()
delete data.spinner
$potentialContainer = $this.parent()
if $potentialContainer.hasClass("app-busy-spinner-wrapper")
$potentialContainer.replaceWith($this)
$this.css("display", $this.data("spinnerOldDisplay"))
unless remove
$this.data("spinnerOldDisplay", $this[0].style.display)
width = $this.outerWidth(true)
height = $this.outerHeight(true)
$spinTarget = $("<div class='app-busy-spinner'/>")
$spinTarget.css("display", "inline-block")
$label = $("<span class='app-busy-label' />")
$label.text(settings.text)
$labelAndSpinnerContainer = $("<div style='display: inline-block; margin: auto;'/>").append($spinTarget, $label)
display = $this.css("display")
$container = $this.wrap($("<div class='app-busy-spinner-wrapper'/>")).parent()
$container.css("display", display) unless display == "none"
$container.height(height)
$container.width(width)
$container.css("float", $this.css("float"))
$container.prepend($labelAndSpinnerContainer)
$this.css "display", "none"
$spinTarget.width(spinSize)
$spinTarget.height(spinSize)
$labelAndSpinnerContainer.css
"position": "relative"
"top": "50%"
"left": "50%"
"margin-top": -$labelAndSpinnerContainer.outerHeight() / 2.0
"margin-left": -$labelAndSpinnerContainer.outerWidth() / 2.0
$label.css
"padding-left": "5px"
"padding-top": "2px"
"float": "left"
$spinTarget.css
"float": "left"
spinner = new Spinner(settings)
data.spinner = spinner.spin($spinTarget[0])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment