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 set the spinner target in the #content div using the Vanilla JS and jQuery options, and I'm having a couple of problems. Firstly, in both cases, the counter is not created in the middle of the target parent element, contrary to what the documentation says:

Positioning
Starting with version 2.0.0, the counter is absolutely positioned at the level of 50% of its parent account. You can specify the top and left options to manually position the counter.

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

Am I misunderstanding the documentation? If so, how can I center the spinner inside a specific element? If not, why is it not a fragment above the centering of the counter inside the target?

Answer 1

Just add

 position: relative; 

in 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 the color of the parent if you have not set the color yourself when initializing. This is due to the fact that it has this additional functionality. In jQuery.spin.js (line 65):

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

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

If you want to reproduce this functionality in standard JavaScript, you can 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 quite sure, but if I'm right, the percentage set in CSS is calculated from the window, not from the element inside this window. Therefore, although I think that the top / left is not calculated from the parent, but from the window.

In addition, the documentation on the line indicates:

Left position relative to parent in px

Read the last 2 characters: pixels, not percent.

How to fix it? Hardcoding is one of the possible ways, but rather static (it is set on the left to half the width of the content - the width of the counter, the upper half .. you get an image).

Answer 3

The solution above does not work for me. I had to add a new css class name inside the "className" option in the spinner settings. eg:

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

Where I impose the necessary styles to center my counter.