admin管理员组

文章数量:1312998

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:

/

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

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/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;
}
  • javascript
  • jquery
  • css
  • spin.js
Share Improve this question asked May 24, 2014 at 10:17 LovelockLovelock 8,10519 gold badges93 silver badges195 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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 bees a positioned ancestor, and the spinner will sit inside it.

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

本文标签： javascriptinsert the spinjs spinner into a divStack Overflow

版权声明：本文标题：javascript - insert the spin.js spinner into a div? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741903481a2404005.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。