Opacity option for background

[dnagir]

Opacity option for background

[wana4jp]

You can also do with pure javascript
(required IE10+ )

var spinner = new Spinner(opts).spin(target);
target.classList.add("opaque");

# Stop Spin
target.classList.remove("opaque");
spinner.stop()

https://developer.mozilla.org/en/docs/Web/API/Element/classList

[fgnass]

Which would do what?

[dnagir]

I though that there's a background div created for the spinner. So I imagined it would be possible to set the background and it's opacity.

But now I kind of see it's a bit tricky...

Sorry for the dumb "issue".

So do I have to wrap it in my own div and position to have the transparent background?
I hoped there's an easier way...

[fgnass]

No, no, not dumb at all. Having the possibility to render a semi-transparent VML rounded-rect as background would be a nice feature for sure. This would require some additional config options though. Something like:

background: {
  color: '#000',
  opacity: 0.7,
  padding: 20,
  radius: 20
}

[dnagir]

The config does make sense to me.

In my particular case I need to apply shadow, rounded corner, small border, background color and transparency... You know, to match the pixel-perfect design :)

Maybe it would be easier to provide ability style it via CSS instead? But I guess it would be relatively big change then.

[fgnass]

Yeah, but that wouldn't work in oldIEs. For now, the easiest solution would probably be to use PNG as background image on your surrounding DIV. I'll keep this issue open as feature request for spin.js 2.0.

[dnagir]

I think it would be ok not to support old IEs as long as person using this feature understands it.

I personally would really prefer CSS styling. And yeah, PNG won't work well in IE 6 unless transparency trick is applied.
So it's pretty much the same.

[dnagir]

So maybe option like: wrapperClassForModernBrowser: "spinner" would do the job :)

[fgnass]

In modern browsers you can already select the outer DIV using div[aria-role=progressbar]. But as you'll see, just adding a class won't be enough, since that DIV 0px high, as wide as its offsetParent, and the spinner is positioned outside of it!

In order to achieve what you want, spin.js would have to create yet another container. The complex part about that is the calculation of the correct top/left offsets. It's certainly doable, but not that trivial.

But for now I'd say it's much easier to add that wrapper div within your project's jQuery glue-code instead of implementing a generic mechanism that works in all situations.

[dnagir]

Yeah, it indeed looks like wrapping in a custom div and positioning it manually is the best way to go for now.

[killthekitten]

I'm also looking for this functionality. I'm using spin.js with jquery, so it can look like $('.some_div').spin({ background: {color: 'white', opacity: '0.5'} }). So, is it a problem to position wrapper at the top: 0, left: 0 of .some_div, with dimensions of .some_div? Or it will do the trick?

[killthekitten]

Just an example of using in our project:

$.fn.preloader = (mode = true) ->
  block = $(this)
  if mode
    block.addClass 'preloader'
    block.css 'opacity', '0.5'
    block.spin
      color: '#f18b00'
  else
    block.spin false
    block.removeClass 'preloader'
    block.css 'opacity', '1'

[PlippiePlop]

To place animation in center off the spinner container that fills the page with a overlay is easy to do:

Change line 152 to:
, el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: '100%', zIndex: o.zIndex})

Change loop code from Line: 218 to
for (; i < o.lines; i++) {
seg = css(createEl(), {
position: 'absolute',
top: '50%',
left: '50%',
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
opacity: o.opacity,
animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
})

Then change you spinner class to:
.spinner{
left:0;
top:0;
height:100%;
background:rgba(255,255,255,.6);
}

[vjpr]

+1

[nicooga]

Little workaound I'm using right now:

$e.addClass 'opaque'
$e.spin()
# Stop spin
$e.removeClass 'opaque'
$e.spin false

.opaque > *:not(.spinner) { opacity: 0.1 }

[vaibhavpandeyvpz]

+1 @nicooga, you are awesome :) your code did it simply & beautifully