CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapbootstrap-modalsweetalert
hakuna
hakuna

Reputation: 6701

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 :

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 ?

Upvotes: 9

Views: 20126

Answers (2)

Limon Monte
Limon Monte

Reputation: 54389

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>

Upvotes: 17

Daniel
Daniel

Reputation: 103

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>

Upvotes: 2

Related Questions