title: Using sweetalert2 with bootstrap 4
body: <p>I'm using sweetAlert2 and I'm trying to use bootstrap 4 to style buttons, setting the properties:</p>
  
  <pre><code>buttonsStyling: false,
  confirmButtonClass: 'btn btn-primary btn-lg',
  cancelButtonClass: 'btn btn-lg'
  </code></pre>
  
  <p>It works, however the <code>showLoaderOnConfirm</code> option is being shown in a very ugly style when I set those properties above.</p>
  
  <p>You can check the examples below:</p>
  
  <p>Steps to reproduce:</p>
  
  <ul>
  <li>Input a valid email;</li>
  <li>Press <em>Submit</em>;</li>
  <li>See the loader (style) for the first (that's using bs4 and for the second, with the default style from swal2).</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('#button').click(() =&gt; {
      swal({
        title: 'Submit email to run ajax request',
        input: 'email',
        showCancelButton: true,
        confirmButtonText: 'Submit',
        showLoaderOnConfirm: true,
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-primary btn-lg',
        cancelButtonClass: 'btn btn-lg',
        preConfirm: function(email) {
          return new Promise(function(resolve, reject) {
            setTimeout(function() {
              if (email === 'taken@example.com') {
                reject('This email is already taken.')
              } else {
                resolve()
              }
            }, 2000)
          })
        },
        allowOutsideClick: false
      }).then(function(email) {
        swal({
          type: 'success',
          title: 'Ajax request finished!',
          html: 'Submitted email: ' + email
        })
      }).catch(swal.noop)
    });
  
    $('#button1').click(() =&gt; {
      swal({
        title: 'Submit email to run ajax request',
        input: 'email',
        showCancelButton: true,
        confirmButtonText: 'Submit',
        showLoaderOnConfirm: true,
        preConfirm: function(email) {
          return new Promise(function(resolve, reject) {
            setTimeout(function() {
              if (email === 'taken@example.com') {
                reject('This email is already taken.')
              } else {
                resolve()
              }
            }, 2000)
          })
        },
        allowOutsideClick: false
      }).then(function(email) {
        swal({
          type: 'success',
          title: 'Ajax request finished!',
          html: 'Submitted email: ' + email
        })
      }).catch(swal.noop)
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.4.2/sweetalert2.min.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;button id="button"&gt;Show (Bootstrap)&lt;/button&gt;
    &lt;hr /&gt;
    &lt;button id="button1"&gt;Show (w/o bootstrap)&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The question is: How can I let the default style for the loader (using bs4)? Or maybe customize the style for the <code>showLoaderOnConfirm</code> option...</p>