CODEWITHSUNDEEP
javascriptjquerycssspin.js
Lovelock
Lovelock

Reputation: 8085

insert the spin.js spinner into a div?

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;
}

Upvotes: 4

Views: 9044

Answers (2)

lewsid
lewsid

Reputation: 1910

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
};

Upvotes: 0

Migwell
Migwell

Reputation: 20117

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.

Upvotes: 6

Related Questions