4

just found spin.js and it seems like a life saver.

The question is how to i insert the spinner into my div?

I have a follow button, that when clicked i remove the background image and currently replace with a loader.gif.

How can i do the same but with spin.js?

I knocked up a quick example of jsfiddle:

http://jsfiddle.net/4XpHp/

I would like the spinner to be inside the red square div.

<div id="foo"></div>
<button id="spin"> Spin! </button>

var opts = {
  lines: 13, // The number of lines to draw
  length: 17, // The length of each line
  width: 8, // The line thickness
  radius: 21, // 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
};

$("#spin").click(function(){
  var target = document.getElementById('foo');
  var spinner = new Spinner(opts).spin(target);
});

#foo {
    width: 50px;
    height: 50px;
    background-color: #f00;
}
Lovelock
  • 7,689
  • 19
  • 86
  • 186

2 Answers2

6

You just need to set:

#foo {
   position: relative; //Added this
   width: 50px;
   height: 50px;
   background-color: #f00;
}

JsFiddle

This is actually a css issue really. By default the .spinner div is set to position: absolute (and you can't change that with css because it's an inline style), which means it's going to be positioned in the middle of the nearest positioned ancestor, which I'm assuming was the <body> tag (feel free to correct me here). By making #foo have a relative position, it becomes a positioned ancestor, and the spinner will sit inside it.

Migwell
  • 18,631
  • 21
  • 91
  • 160
  • Thanks, works perfectly fine. Not working on my actual site however. I guess there is some confliction somewhere along the line with other scripts. Works in a blank testing page but ah well. Afternoon of fiddling around it is... – Lovelock May 24 '14 at 11:13
  • I don't know if this is due to an update to spin.js since this answer was posted, but the in the JsFiddle the spinner isn't being sized by the `#foo` div. It's centered there as is usual for spin.js, but it spills out of `#foo`. – lainceline Nov 28 '14 at 22:45
  • No it was always like this, and I don't think it's possible to fit it to the containing div. The spinner blades are drawn according to the radius option, and allowing CSS to affect this would mess up that option. Also the actual spinner is inside a div that's 0px*0px, so it won't force #foo to increase in size either. – Migwell Nov 29 '14 at 02:01
0

I updated your fiddle to get it to do what you wanted. I just had to adjust some of the configuration values to get the top and left positions correct, and then adjust the size of the spinner itself.

http://jsfiddle.net/4XpHp/2/

var opts = {
    lines: 10, // The number of lines to draw
    length: 7, // 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: '12%', // Top position relative to parent
    left: '6.5%' // Left position relative to parent
};
lewsid
  • 1,900
  • 2
  • 17
  • 19