Wie kann ich eine "Please Wait, Loading..."-Animation mit jQuery erstellen?

Question

Ich möchte eine "Bitte warten, laden"-Animation mit einem sich drehenden Kreis auf meiner Website platzieren. Wie sollte ich dies mit jQuery zu erreichen?

Answer 1

Fontawesome hat ein Ladeanimationssymbol, das direkt in Ihrem Projekt verwendet werden kann, ohne dass zusätzliche Daten erforderlich sind, wenn Sie bereits Fontawesome verwenden.

<span id="loading" style="display:none"><i class="fa fa-spinner fa-pulse"></i> PLEASE WAIT </span>

Dann ist jquery können Sie folgenden Code zu zeigen, verstecken das Element verwenden.

$(document).ajaxSend(function() {
    $('#loading').show();
});

$(document).ajaxComplete(function() {  
    $('#loading').hide();
});

Answer 2

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" id="btn-submit" class="btn btn-info">Submit</button>

  <div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loader" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" style="width:50px;padding-top: 15%;">
      <div class="modal-content text-center">
        <img src="https://i.gifer.com/ZZ5H.gif" />    
      </div>
    </div>
  </div>

jQuery

$(function() {
      $('#btn-submit').click(function() {
        $('#loadingModal').modal('show');
      });
    });

Answer 3

Wenn die Seite vorbereitet wird (insbesondere bei Datenbankabfragen), funktioniert diese Technik nicht. Stattdessen habe ich eine einfache .asp Seite mit einer ähnlichen Ladeanimation und einem Umleitungslink zu der anzuzeigenden Seite. Auf diese Weise funktioniert die Animation besser.

Answer 4

Ich habe auch ein solches Problem (Herausforderung) gefunden, den Benutzer über einige "Infos" während der DB-Antwort zu informieren.

Meine Lösung ist wahrscheinlich ein wenig anders als die hier vorgestellte, ist das gut oder schlecht? Ich weiß es nicht, für mich war es ausreichend.

$.ajax({ 
    type: 'ajax',
    method: 'post',
    url: '<?php echo base_url()?>skargi/osluga_skarg',
    data: { full_date: full_date, head_title: head_title },
    //async: false,             
    dataType: 'json',
    beforeSend: function() { $body.addClass("loading"); },
    success: function(data) {   
        $body.removeClass("loading");

Answer 5

Platzieren Sie diesen Code in Ihrem Body-Tag

<div class="loader">
<div class="loader-centered">
    <div class="object square-one"></div>
    <div class="object square-two"></div>
    <div class="object square-three"></div>
</div>
</div>
<div class="container">
<div class="jumbotron">
    <h1 id="loading-text">Loading...</h1>
</div>
</div>

Und verwenden Sie dieses Jquery-Skript

<script type="text/javascript">

jQuery(window).load(function() {
//$(".loader-centered").fadeOut();
//in production change 5000 to 400
$(".loader").delay(5000).fadeOut("slow");
$("#loading-text").addClass('text-success').html('page loaded');
});
</script>

Sehen Sie hier ein vollständiges Arbeitsbeispiel.

http://bootdey.com/snippets/view/page-loader