Add loaderHtml

cypress/integration/methods/showLoading.spec.js

@@ -33,17 +33,21 @@ describe('showLoading() and hideLoading()', () => {
     Swal.showLoading()
     expect(Swal.isVisible()).to.be.true
     expect(Swal.getActions().classList.contains('swal2-loading')).to.be.true
+    expect(isVisible($('.swal2-loader'))).to.be.true
+    expect($('.swal2-loader').innerHTML).to.equal('')
   })
 
   it('showConfirmButton: false + showLoading()', (done) => {
     Swal.fire({
       showConfirmButton: false,
+      loaderHtml: '<i>hi</i>',
       onOpen: () => {
         expect(isHidden(Swal.getActions())).to.be.true
         Swal.showLoading()
         expect(isVisible(Swal.getActions())).to.be.true
         expect(Swal.getActions().classList.contains('swal2-loading')).to.be.true
         expect(isVisible($('.swal2-loader'))).to.be.true
+        expect($('.swal2-loader').innerHTML).to.equal('<i>hi</i>')
         expect(isHidden(Swal.getConfirmButton())).to.be.true
         expect(isHidden(Swal.getCancelButton())).to.be.true
         done()

src/scss/_core.scss

@@ -237,6 +237,8 @@
 
 .swal2-loader {
   display: none;
+  align-items: $swal2-loader-align-items;
+  justify-content: $swal2-loader-justify-content;
   width: $swal2-loader-width;
   height: $swal2-loader-height;
   margin: $swal2-loader-margin;

src/utils/dom/renderers/renderActions.js

@@ -18,13 +18,14 @@ export const renderActions = (instance, params) => {
   // Custom class
   dom.applyCustomClass(actions, params, 'actions')
 
-  // Render Confirm button
+  // Render buttons
   renderButton(confirmButton, 'confirm', params)
-  // Render Deny button
   renderButton(denyButton, 'deny', params)
-  // render Cancel Button
   renderButton(cancelButton, 'cancel', params)
 
+  // Loader
+  loader.innerHTML = params.loaderHtml
+
   if (params.buttonsStyling) {
     handleButtonsStyling(confirmButton, denyButton, cancelButton, params)
   } else {

src/utils/params.js

@@ -50,6 +50,7 @@ export const defaultParams = {
   showCloseButton: false,
   closeButtonHtml: '×',
   closeButtonAriaLabel: 'Close this dialog',
+  loaderHtml: '',
   showLoaderOnConfirm: false,
   imageUrl: undefined,
   imageWidth: undefined,

src/variables.scss

@@ -180,9 +180,11 @@ $swal2-button-focus-background-color: null !default;
 $swal2-button-focus-box-shadow: 0 0 0 1px $swal2-background, 0 0 0 3px $swal2-outline-color !default;
 
 // LOADER
-$swal2-loader-margin: 0 1.875em !default;
+$swal2-loader-align-items: center !default;
+$swal2-loader-justify-content: center !default;
 $swal2-loader-width: 2.2em !default;
 $swal2-loader-height: 2.2em !default;
+$swal2-loader-margin: 0 1.875em !default;
 $swal2-loader-animation: swal2-rotate-loading 1.5s linear 0s infinite normal !default;
 $swal2-loader-border-width: .25em !default;
 $swal2-loader-border-style: solid !default;

sweetalert2.d.ts

@@ -819,7 +819,7 @@ declare module 'sweetalert2' {
     showCloseButton?: boolean;
 
     /**
-     * Use this to change the content of the close button.
+     * Use this to change the HTML content of the close button.
      *
      * @default '×'
      */
@@ -832,6 +832,13 @@ declare module 'sweetalert2' {
      */
     closeButtonAriaLabel?: string;
 
+    /**
+     * Use this to change the HTML content of the loader.
+     *
+     * @default ''
+     */
+    loaderHtml?: string;
+
     /**
      * Set to true to disable buttons and show that something is loading. Useful for AJAX requests.
      *

test/qunit/methods/showLoading.js

@@ -5,18 +5,22 @@ QUnit.test('should open an empty popup with loader', (assert) => {
   Swal.showLoading()
   assert.ok(Swal.isVisible())
   assert.ok(Swal.getActions().classList.contains('swal2-loading'))
+  assert.ok(isVisible($('.swal2-loader')))
+  assert.equal($('.swal2-loader').innerHTML, '')
 })
 
 QUnit.test('showConfirmButton: false + showLoading()', (assert) => {
   const done = assert.async()
   Swal.fire({
     showConfirmButton: false,
+    loaderHtml: '<i>hi</i>',
     onOpen: () => {
       assert.ok(isHidden(Swal.getActions()))
       Swal.showLoading()
       assert.ok(isVisible(Swal.getActions()))
       assert.ok(Swal.getActions().classList.contains('swal2-loading'))
       assert.ok(isVisible($('.swal2-loader')))
+      assert.equal($('.swal2-loader').innerHTML, '<i>hi</i>')
       assert.ok(isHidden(Swal.getConfirmButton()))
       assert.ok(isHidden(Swal.getCancelButton()))
       done()