27
votes

Bootstrap 4 Loading Spinner dans le bouton

J'essaie d'implémenter le spinner de chargement bootstrap 4 dans le bouton comme dans Bootstrap Spinners .

Voici ce que je fais dans le code

my.html

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // load data via AJAX
      fetch_data($("#inputTopic").val());
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...`
      );
    });
});

my.js

<form class="form-inline" id="topicForm" action="" method="POST">
  <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
  <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
</form>

Cela fonctionne sauf que le spinner comme indiqué dans la documentation d'amorçage n'apparaît pas. Le texte du bouton devient Loading... comme prévu. Je voulais savoir ce que je ne fais pas directement avec le spinner à l'intérieur du bouton.

Code Pen ici

jquery bootstrap-4

6 commentaires

Bootstrap spinners.css est-il inclus?

le seul css inclus est https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstra‌p.min.css

semble ne pas contenir de css spinner - je viens de faire une recherche dans CSS ci-dessus

L'as tu essayé? Un g était supplémentaire dans Loadingg ...

Je ne vois pas de «g» supplémentaire et cela ne devrait pas non plus avoir d'importance. D'où puis-je obtenir «spinners.css»?

Vous pouvez simplement essayer le code ci-dessous et CSS - Cela fonctionnera très bien. @ user3206440

4 Réponses :

6
votes

Il semble que le CSS spinner ne soit pas présent dans la bibliothèque CSS chargée. Veuillez essayer les codes ci-dessous

En CSS

$(document).ready(function() {
    $("#btnFetch").click(function() {
      $(this).prop("disabled", true);
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loadingg...`
      );
    });
});

Dans JS

    @keyframes spinner-border {
      to { transform: rotate(360deg); }
    } 
    .spinner-border{
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: text-bottom;
        border: .25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner-border .75s linear infinite;
        animation: spinner-border .75s linear infinite;
    }
    .spinner-border-sm{
        height: 1rem;
        border-width: .2em;
    }

Code Pen

2 commentaires

cela a fonctionné pour moi, un indice sur pourquoi CSS devrait être ajouté manuellement sur ces classes de spinner bootstrap?

veuillez vérifier les compatibilités de version

46
votes

Vous devez ajouter Bootstrap 4.2.1 pour ce code pendant que vous utilisez 4.0

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div style="margin:3em;">
  <form class="form-inline" id="topicForm" action="" method="POST">
    <input type="text" id="inputTopic" name="topic" class="form-control mb-2 mr-sm-2" placeholder="Topic of interest" required autofocus/>
    <button type="button" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

$(document).ready(function() {
    $("#btnFetch").click(function() {
      // disable button
      $(this).prop("disabled", true);
      // add spinner to button
      $(this).html(
        `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
      );
    });
});

3 commentaires

pourriez-vous ajouter un script de récupération après un certain délai?

Existe-t-il un moyen d'arrêter le spinner après un temps spécifique ou simplement en appelant une méthode ou en supprimant certains css, etc. Fondamentalement, je cherche à démarrer le spinner sur un clic sur le bouton, puis lorsque le traitement se termine, je veux arrêter le spinner.

django-bootstrap4==1.0.1 le même problème lors de l'utilisation de django-bootstrap4==1.0.1 (avec Bootrtrap v4.1.1). La migration vers django-bootstrap4==1.1.1 mis à jour la version Bootstrap vers 4.3.1 et les spinners ont commencé à fonctionner instantanément. Réponse très utile.

3
votes

Pourriez-vous essayer d'ajouter [En tête] J'ai ajouté cela a fonctionné dans votre codepen

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

et ça

  <link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

0 commentaires

0
votes

Cela fonctionne pour moi. Il stocke le texte / html d'origine en tant qu'attribut et le restaure à partir de là.

    $(document).ready(function() {
        $("#btnFetch").click(function() {
           var $this = $(this);
           
           //Call Button Loading Function
           BtnLoading($this);
    
           //Call Button Reset Function after AJAX or your code execution
           BtnReset($this);
        });
    });
    
    function BtnLoading(elem) {
        $(elem).attr("data-original-text", $(elem).html());
        $(elem).prop("disabled", true);
        $(elem).html('<i class="spinner-border spinner-border-sm"></i> Loading...');
    }
    
    function BtnReset(elem) {
        $(elem).prop("disabled", false);
        $(elem).html($(elem).attr("data-original-text"));
    }

0 commentaires