Question

121

Centering spin.js spinner inside a (target) div

rated 0 times [ 126] [ 5] / answers: 1 / hits: 16225 / 10 Years ago, mon, march 24, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maureen

Add To Favorites

Follow

Total Points: 151

Total Questions: 110

Total Answers: 110

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

answered 10 Years ago harleyterryp · Accepted Answer

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.