Insérez le spin.js spinner dans un div?

Vient de trouver spin.js et il semble être un économiseur de vie.

La question est de savoir comment insérer le spinner dans mon div?

J'ai un bouton de suivi, que lorsque j'ai cliqué, je retire l'image d'arrière-plan et je le remplacer avec un loader.gif.

Comment puis-je faire de même, mais avec spin.js?

J'ai frappé un rapide exemple de jsfiddle:

Http://jsfiddle.net/4XpHp/

Je voudrais que le spinner soit à l'intérieur du quadrillage carré rouge.

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

Il vous suffit de définir:

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

JsFiddle

C'est vraiment un problème css vraiment. Par défaut, le .spinner div est défini sur la position: absolute (et vous ne pouvez pas changer cela avec css car c'est un style en ligne), ce qui signifie qu'il va être positionné au milieu de l' ancêtre positionné le plus proche , ce que je suppose Était la <body> (n'hésitez pas à me corriger ici). En faisant de #foo avoir une position relative, il devient un ancêtre positionné , et le spinner sera assis à l'intérieur.

J'ai mis à jour votre violon pour l'amener à faire ce que vous vouliez. Je devais simplement ajuster certaines des valeurs de configuration pour obtenir les positions supérieure et gauche correctes, puis ajuster la taille du spinner lui-même.

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