insert the spin.js spinner into a div?

Question

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. ```

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 C…

Accepted Answer

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.

insert the spin.js spinner into a div?

Solution

Problem