Search code examples
javascriptjquerycsspositionspin.js

Apply spin.js spinner to target and NOT its parent


when positioniung the spin.js spinner you have options. These options say that it positions it relevant to the targets parent. I do not want this.

I wish however for the spinner to position itself inside and centre of the target div.

Heres the basic set up:

        var opts = {
        lines: 13, // The number of lines to draw
        length: 5, // The length of each line
        width: 2, // The line thickness
        radius:5, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 58, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#fff', // #rgb or #rrggbb or array of colors
        speed: 0.9, // Rounds per second
        trail: 100, // Afterglow percentage
        shadow: false, // 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
        left: '50%' // Left position relative to parent
    };

    // show a spinner in place of the icon
    var target = document.getElementById('followdiv');
    var spinner = new Spinner(opts).spin(target);
    $(target).data('spinner', spinner);

Thanks, Any ideas?


Solution

  • #followdiv{
        /* ... */
        position: relative;
    }
    

    This says All absolutely positioned elements inside me will be positioned relatively to me.

    JS Fiddle Demo