1. 15

    Essayez de remplacer

    var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);

    avec

    $('#spinnerContainer').after(new Spinner(opts).spin().el);

    Vous devez ajouter le code html de l'élément de la méthode de centrifugation crée pour les dom

    Voici un exemple pour vous aider à démarrer http://jsfiddle.net/5CQJP/1/

    Apparemment, mon code est très têtu et il ne veut simplement pas de travail, en dépit de la > 10 versions que j'ai essayé jusqu'à présent. En tout cas, merci 🙂
    alors, comment arrêter le compteur???
    Si vous avez besoin de l'arrêter, alors vous avez besoin pour économiser de l'instance de nouvelle casserole à une variable et ensuite appeler la méthode stop.
    J'ai essayé le "$('#spinnerContainer').après(nouveau Spinner(opts).stop().el);" Il n'a pas fonctionné pour moi.À l'aide !!
    Exemple de spinner filature pendant 2 secondes. var s = new Spinner(opts); $('#spinnerContainer').après le(s.spin().el); setTimeout(s).stop.bind(s), 2000);

    OriginalL'auteur James Kyburz

  2. 9

    Je ne sais pas si cette question a jamais obtenu de réponse, mais pour ceux qui sont toujours à la recherche d'une réponse:

    J'ai trouvé que j'avais besoin de déplacer le code javascript sous le spinnerContainer div. Je crois que ce serait également le travail si vous mettez le code javascript dans un événement onload. Voici ce que j'ai fait:

    <div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray;">
</div>
<script src="Scripts/Spin.js" type="text/javascript"></script>
<script type="text/javascript">
    var opts = {
      lines: 13, //The number of lines to draw
      length: 7, //The length of each line
      width: 4, //The line thickness
      radius: 10, //The radius of the inner circle
      corners: 1, //Corner roundness (0..1)
      rotate: 0, //The rotation offset
      color: '#000', //#rgb or #rrggbb
      speed: 1, //Rounds per second
      trail: 60, //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: 'auto', //Top position relative to parent in px
      left: 'auto' //Left position relative to parent in px
    };
    var target = document.getElementById('spinnerContainer');
    var spinner = new Spinner(opts).spin(target);
</script>
    Le compteur est affiché dans le coin supérieur gauche . Comment positionner?
    try { top: '50%',: '50%' } .[Voir] (fgnass.github.io/spin.js) pour plus de détails
    var target2 = document.getElementById ("spinnerContainer'); var spinner2 = new Spinner(opts).stop(target2); Il n'est pas l'arrêt de la toupie.Aucun indice ?

    OriginalL'auteur minchYoda

  3. 1

    Voici ma réponse. Fonctionne très bien.

    //Declare Script
<script src="Scripts/spin.js" type="text/javascript"></script>


 <button  id="btnSearchClick">Search</button>

//Displays Loading Spinner
<div id="loading">
    <div id="loadingcont">
        <p id="loadingspinr">
        </p>
    </div>
</div>



<script type="text/javascript">
     //On button click load spinner and go to another page
     $("#btnSearchClick").click(function () {  
        //Loads Spinner
        $("#loading").fadeIn();
        var opts = {
            lines: 12, //The number of lines to draw
            length: 7, //The length of each line
            width: 4, //The line thickness
            radius: 10, //The radius of the inner circle
            color: '#000', //#rgb or #rrggbb
            speed: 1, //Rounds per second
            trail: 60, //Afterglow percentage
            shadow: false, //Whether to render a shadow
            hwaccel: false //Whether to use hardware acceleration
        };
        var trget = document.getElementById('loading');
        var spnr = new Spinner(opts).spin(trget);

        //Go another page.
        window.location.href = "http://www.example.com/";
   });
 </script>

    OriginalL'auteur Apollo

  4. 0

    Essayez ceci: 

    var target = document.getElementById('spinnerContainer');
           //target.style.display = "block";
           var spinner = new Spinner(opts);

    Si vous utilisez jQuery:

               $(target).html(spinner.el);

    Si non pas, comme dans la documentation:

               target.innerHtml = '';
           target.appendChild(spinner.el);

    Je n'ai pas essayé mais ça devrait fonctionner. Si un problème se produit, faites le moi savoir.

    Merci pour votre réponse :). J'ai essayé les deux versions, mais le compteur ne s'affiche toujours pas. Je n'ai aucune idée pourquoi n'est-ce pas de travail,parce que je suis sûr que le script est bon (les évaluations ont été beaucoup), mais je siply ne sais pas où est mon erreur.
    Avez-vous inclus jQuery n'importe où dans votre code?
    pouvez-vous montrer un jsfiddle pour cela.

    OriginalL'auteur Lupus

  5. 0

    Je sais que c'est tard, mais je suis curieux de savoir si vous jamais eu que cela fonctionne. Je vais vous dire une stupide chose que je faisais un peu et de ne pas s'en rendre compte. J'ai été faire la toupie de la même couleur que le fond, il serait montrant le contre et c'est pourquoi je ne pouvais pas le voir. Aussi j'ai utilisé JQuery comme on le voit ici https://gist.github.com/its-florida/1290439
    A travaillé comme un charme

    Hey, merci pour la réponse. Finalement, j'ai découvert que, en raison de la façon dont ma demande a été construit, j'ai eu un rappel à un certain moment, qui a annulé mon spinner. En fait, le compteur a été de travail, mais en raison du fait que la fonction de rappel permet de se produire assez rapidement, je n'étais pas en mesure de le constater.

    OriginalL'auteur snowleopard