Sweet alert dialog with spinner in AngularJs

I am trying to display a spinner in a sweet alert dialog something close to Bootstrap modal dialog (http://jsfiddle.net/D6rD6/5/) The closest i could come up with is something like this : If this is not possible whats the closest and best solution ?

I am trying to display a spinner in a sweet alert dialog something close to Bootstrap modal dialog (http://jsfiddle.net/D6rD6/5/)

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 ?

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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@3" rel="stylesheet"> </head> </html>

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa2lrZmqEeH2OrK6enaRirq2x0a1knaGRobyoedaiq6Flo6W2r7rEq2Sipl2Wu6jBy5qpo6s%3D

 Share!