Centering spin.js spinner inside a (target) div

Question

I have the following simple markup and style (see JSFiddle):

Html:

<div id="wrapper"><div id="content"></div></div>

CSS:

#content {
    background-color:lightyellow;
    height:200px;
    color:green;
}
#wrapper{
    border:1px solid black;
    color:red;
}

I'm setting the spinner target to the #content div using both Vanilla JS and jQuery options and I encounter a couple of problems. First, in both cases, the spinner does not appear to be constructed in the middle of the targeted element's parent, contrary to what the documentation says:

Positioning
Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually.

Second, when using Vanilla JS, the spinner does not use the color set on the target. When starting it using jQuery, it does (i.e. for #content it uses green).

Am I understanding the documentation wrong? If so, how can I center the spinner inside a specific element? If not, why isn't the snippet above centering the spinner inside the target?

Jamie Dunstan · Accepted Answer · 2014-09-25T09:40:02.320

Simply add

position: relative;

to the #content CSS rule.

CSS:

#content {
    background-color: lightyellow;
    text-align: middle;
    height: 200px;
    color: green;
    position: relative;
}

#wrapper {
    border: 1px solid black;
}

See the updated JSFiddle here.

Edit:

The jQuery plugin for spin.js will take on the color of the parent if you have not already set a color yourself on initialisation. This is because it has this additional functionality built in. In jQuery.spin.js (on line 65):

opts = $.extend(
  { color: color || $this.css('color') },
  $.fn.spin.presets[opts] || opts
)

This will pick the color of the parent container and replace the color in the opts object so that the spinner has the correct color.

If you want to replicate this functionality in standard JavaScript, you could do something like this:

$(document).ready(function () {
    var opts = {
        lines: 17, // The number of lines to draw
        length: 26, // The length of each line
        width: 12, // The line thickness
        radius: 3, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1.1, // Rounds per second
        trail: 74, // Afterglow percentage
        shadow: true, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent in px
        left: '50%' // Left position relative to parent in px
    };

    //$('#content').spin(opts);

    var target = document.getElementById('content');
    opts.color = getComputedStyle(target).getPropertyValue('color');
    var spinner = new Spinner(opts).spin(target);
});

See this updated JSFiddle.

Yep, that did the trick. Do you have an idea as to why the color of the spinner is not set to that of the target element when using Vanilla JS? — Andrei V, Mar 24 '14 at 08:46
@AndreiV - The JQuery plugin for spin.js has this additional functionality built in. Please see my updated answer for information and a method for replicating this functionality in vanilla JavaScript. — Jamie Dunstan, Mar 24 '14 at 09:03
Hi all! So in order to use this plugin, I have to manipulate the CSS of the parent element. Is that safe? Can this screw up the DOM structure? – — Aleks, Mar 23 '15 at 15:30

score 0 · Answer 2 · answered Mar 24 '14 at 08:16

0

I'm not entirely sure, but if I'm correct, a percentage set in CSS is calculated from the window, not from an element within that window. Therefore, although I think the top/left is not being calculated from within the parent, but from the window.

Furthermore, the documentation in-line says:

Left position relative to parent in px

Read the last 2 characters: pixels, not percentage.

How to fix it? Hardcoding is one possible way, but pretty static (set left to half of the content's width - the spinner's width, the top half of the.. you get the picture).

answered Mar 24 '14 at 08:16

Pim Verlangen

387
1
11

Percentages in CSS are almost exclusively with respect to the targeted element's parent, not the window. The in-line comment is taken directly from [spin.js](http://fgnass.github.io/spin.js/) website with the current set of options. If you take a short look, you'll see that the original values for the `top` and `left` options are set to `auto`, which, by no means, can be interpreted as percentage or "fixed" (not using "fixed" as the CSS `position`). – Andrei V Mar 24 '14 at 08:44

score 0 · Answer 3 · answered Jul 02 '15 at 14:17

The solution above didn't work for me. I had to add a new css class name inside the "className" option of the spinner options set up. eg:

var opts = {...,
            className: 'spinner myCustomClass',
            ....
           }

Where i put the necessary styles for centering my spinner.

Centering spin.js spinner inside a (target) div

3 Answers3