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 class="fa fa-spinner" aria-hidden="true"></i>', html: true, customClass: 'manual-upload-errors-swal-width' }); If this is not possible whats the closest and best solution ?
Table of Contents
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>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>