Extends spin.js to show an image inside the spinner. Uses an <img> node.

[kelko]

Example of usage:

opts = { innerImage: { url: 'img/logo.png', /* relative path from HTML site point of view / width: 58, / width of node / height: 58 / height of node */ }, lines: ….

[kelko]

Real-World example. This is the spin.js configuration:

var opts = {
    innerImage: { 
        url: 'img/logo.png',
        width: 58,
        height: 58
    },
    lines: 12, // The number of lines to draw
    length: 2, // The length of each line
    width: 8, // The line thickness
    radius: 34, // The radius of the inner circle
    corners: 0, // 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, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: false, // Whether to render a shadow
    hwaccel: true, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
};

This is the result:

[KOTRET]

why not wrap the image in a container and place the spinner in it? there is no need for this extension...

[kelko]

Do as you please, it's your code.

But IMHO putting the spinner in a wrapper which includes the image I want to be shown in the spinner sounds like an unpleasant hack. The way I see it: I want the spinner to display an image of my liking so I tell the spinner to display that image.

[KOTRET]

be cool, that was just a suggestion. Furthermore its not my code! :D imagine, the next one wants to show a video or any other stuff in the middle of the spinner. So for me this has nothing to do with the spinner itself anymore.

just my 2 cents :)

[kelko]

a) Sorry if it sounded "pouting". Was not intended. But (see b. below) I mistook you and I don't see a sense in "battling" over if this or that extension has a sense or not. The owner of the code decides and I'm OK with it. So: I'm cool, really. b) I mistook you for fgnass as I read the comment on my pad as I had other things on my mind in that moment. So I closed it too fast. Sorry.

About your objection: Yes, I understand. But still that person want the video or what-ever to be (visibly) part of the spinner. So in my opinion the spinner should be the part I hook it into, not a div on the outside of the spinner which does some positioning magic to place it on the correct position. Maybe the spinner could then offer an attribute to pass an HTML element which is then shown in the middle of the spinner. This way the spinner does not care what it is that is shown but the spinner does all the positioning of the inner part.

[fgnass]

I think it would be a good idea to change the spin.js code in such a way that the returned element has the exact size of the visual bounding box instead of 0x0 as it is today. One could then easily set a background image via CSS. I would also remove the whole positioning code from the core library and leave it up to the user (or the jQuery plugin) to do the actual positioning/centering. What do you think of this approach?

[kelko]

I like the idea. But I wouldn't drop the calculation code too fast. If you already have a working code for that why require the users to calculate it from now on on their own? Maybe make it optional:

positioning: 'inherit'

As default to not calculate the position inside spin.js but let another component decide (CSS, jQuery, some code of my own)

positioning: 'calculate'

The current way of setting the absolute position inside the target yourself. (Feel free to find more suitable names.)

But that would only help to set an image into the spinner, but taking KOTRET's objection into account (I know he wrote that for another purpose. But still that might be a valid point): How about adding the possibility to hook another div into the middle of the created spinner.js div? That way the users are completely free to put into the spinner whatever they like. (videos, images, SVGs, ...)