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?

Answer 1

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.

Answer 2

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).

Answer 3

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.