I am trying to display a spinner in a sweet alert dialog something close to Bootstrap modal dialog ()

The closest i could come up with is something like this :

SweetAlert.swal({ title: '<small>Import errors occurred !</small>', text: '<i aria-hidden="true"></i>', html: true, customClass: 'manual-upload-errors-swal-width' });

If this is not possible whats the closest and best solution ?

2 Answers

The original sweet alert plugin is unsupported, I suggest you using SweetAlert2 plugin.

Migration is simple, here's the migration guide: Migration from SweetAlert to SweetAlert2

In SweetAlert2 there's swal.showLoading(), so you can show loading modal as easy as:

Swal.fire('Please wait') Swal.showLoading()
<script src=""></script>
4

This code works fine for showing Loading Spinner.

 const showLoading = function() { Swal.fire({ title: 'Please Wait', allowEscapeKey: false, allowOutsideClick: false, background: '#19191a', showConfirmButton: false, onOpen: ()=>{ Swal.showLoading(); } // timer: 3000, // timerProgressBar: true }); }; showLoading();
<html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial- scale=1.0"/> <!-- Compiled and minified JavaScript --> <script type="text/javascript" src=""></script> <script src=""></script> <link href="" rel="stylesheet"> </head> </html>

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa2lrZmqEeH2OrK6enaRirq2x0a1knaGRobyoedaiq6Flo6W2r7rEq2Sipl2Wu6jBy5qpo6s%3D