How to show loading icon on sweetalert

user_8587231 0
Viewed 83614

How can I display loading icon or spin while my during ajax call. below is my code

 swal({
       title: "Confirm your transaction",
        html:true,
       showSpinner: true,
       showCancelButton: true,
        confirmButtonColor: "#DD6B55",
       confirmButtonText: "Send",
      closeOnConfirm: false
  },function () {
      $.ajax({
   type: "post",
    url: remoteUrl,
    data: largeParams,
   success: function (data) { }
  }).done(function (data) {
    swal("Thank you for your order", data, "success");
  }).error(function (data) {
  swal("Oops", "We couldn't connect to the server!", "error");
 });
});

Answers will be appreciated.

sweetalert jquery ajax
5 Answers

This has worked best for me.

Previously, this was the case:

Rather than opening another sweet alert change the content within the sweet alert, otherwise there will be an ugly flash when the sweet alert is trying to change.

Thankfully this issue has been resolved in version 9.8.2.

Now that the previous issue has been resolved, we can open new sweet alert modals in our ajax call without that ugly flash.

You can also put a setTimeout around the swal.fire() to prevent an ugly transition between modals like so:

// this way when the ajax call completes quickly, the loader will still be shown for a bit
setTimeout(function() {
    swal.fire({
        icon: 'success',
        html: '<h5>Success!</h5>'
    });
}, 500);

// the loader html
var sweet_loader = '<div class="sweet_loader"><svg viewBox="0 0 140 140" width="140" height="140"><g class="outline"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="rgba(0,0,0,0.1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></g><g class="circle"><path d="m 70 28 a 1 1 0 0 0 0 84 a 1 1 0 0 0 0 -84" stroke="#71BBFF" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-dashoffset="200" stroke-dasharray="300"></path></g></svg></div>';

$.ajax({
    type: 'POST',
    url:  myurl,
    data: str,
    // here
    beforeSend: function() {
        swal.fire({
            html: '<h5>Loading...</h5>',
            showConfirmButton: false,
            onRender: function() {
                 // there will only ever be one sweet alert open.
                 $('.swal2-content').prepend(sweet_loader);
            }
        });
    },
    success: function(json) {
        try {
            json = JSON.parse(json);
        }
        catch(error) {
            swal.fire({
                icon: 'error',
                html: '<h5>Error!</h5>'
            });
            return false;
        }
        if(json.success) {
            swal.fire({
                icon: 'success',
                html: '<h5>Success!</h5>'
            });
        } else {
            swal.fire({
                icon: 'error',
                html: '<h5>Error!</h5>'
            });
        }
    },
    error: function() {
        swal.fire({
            icon: 'error',
            html: '<h5>Error!</h5>'
        });
        return false;
    }
});

Check out this codepen for an example.

Apparently you can also use the following to show real time progress, but I have not tested it.

xhr: function() {
    var xhr = $.ajaxSettings.xhr();
    xhr.upload.onprogress = function(e) {
        // progressive loader
    };
    return xhr;
},
user_114611770

Use the promises, this code reference from the website.

https://sweetalert.js.org/guides/#ajax-requests

swal({
  text: 'Search for a movie. e.g. "La La Land".',
  content: "input",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(name => {
  if (!name) throw null;

  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
  return results.json();
})
.then(json => {
  const movie = json.results[0];

  if (!movie) {
    return swal("No movie was found!");
  }

  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;

  swal({
    title: "Top result:",
    text: name,
    icon: imageURL,
  });
})
.catch(err => {
  if (err) {
    swal("Oh noes!", "The AJAX request failed!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});
user_5515590

Simple example working with last Sweet Alert

$('#form_button_submit').click(function(){

            swal({
                title:"", 
                text:"Loading...",
                icon: "https://www.boasnotas.com/img/loading2.gif",
                buttons: false,      
                closeOnClickOutside: false,
                timer: 3000,
                //icon: "success"
            });
            

        });
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>



<button type="submit" id="form_button_submit">
        TEST LOAD
</button>

user_22931580 
swal({
        title: "Are you sure?",
        text: "",
        confirmButtonClass: "show-loading-icon",
        cancelButtonClass: "show-loading-icon-delete",
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        closeOnConfirm: false,
        showCancelButton: true,
        closeOnCancel: true,
        titleClass: "bluecolor",
    }, function (selection) {

        //If confirm click then show loading on confirm button
        if(selection){
            var initial = $(".show-loading-icon").html();

            // you can add glyphicon or font-awesome icon html codes
            $(".show-loading-icon").html("Loading...").attr("disabled", "disabled");

            //Do some operation, eg. ajax call, fetch request etc, then show icon again
            $(".show-loading-icon").html(initial).removeAttr("disabled");
        }
        else{

            //Similary for cancel also....
                    //.....

        }
    });
user_67304000
Related