SweetAlert2：如何在弹窗中显示加载动画图标

要实现这个需求，你可以通过取消默认图标并自定义HTML内容来添加加载动画，具体修改如下：

修改后的代码 #

this.$swal({                        
    icon: null, // 取消默认图标占位，避免空图标区域
    html: '<div class="swal2-loader swal2-show"></div> Please be patient, it can take up to several minutes to generate a test.',
    showCloseButton: false,
    showCancelButton: true,
    showConfirmButton: false,
    allowOutsideClick : false, 
    focusConfirm: false,                        
    cancelButtonText : 'Cancel Test',
    customClass: {
        confirmButton: 'btn btn-primary',
        cancelButton: 'btn btn-outline-danger ml-1',
    },
    buttonsStyling: false,
}).then(( result ) => {
    if( result.isDismissed ) {
        this.isTestStop = true;
    }                        
});

关键修改点 #

• 移除原有的icon: 'warning'配置，添加icon: null消除默认图标占位区域
• 在html内容开头插入SweetAlert2内置的加载动画元素<div class="swal2-loader swal2-show"></div>，这个类是SweetAlert2自带的加载样式，会自动显示旋转动画
• 如果你的项目使用Bootstrap，也可以替换为Bootstrap的spinner组件，示例：

  <div class="spinner-border text-warning mr-2" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  

排版优化（可选） #

如果想让加载动画和文字的间距更合理，可以给加载元素添加mr-2（Bootstrap类）或自定义margin样式，避免文字紧贴动画。

内容的提问来源于stack exchange，提问作者Shibbir