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 () the Closest I Could Come up with Is Something Like This...
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 ?
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>Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
