loading spinner

loading spinner border

by AlexJsh02

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
      <div class="col-md-5">
        <h4>Loading Modal</h4>
        <a href="#" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#loading-modal"  tabindex="1">Click to view modal</a>
    </div>
</div>
<div class="modal fade" id="loading-modal" tabindex="-1" role="document" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="media-body">
        <button class="btn btn-lg btn-primary" type="button" disabled>
          <span class="spinner-border" role="status" aria-hidden="false"></span>
          Loading...
        </button>
      </div>
    </div>
  </div>
</div>

CSS

a.btn:active,
a.btn:focus {
}
@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

@media all {
    #loading-modal .modal-dialog {
        margin-top: 80px;
    }

    #loading-modal .spinner-border {
        display: inline-block;
        position: relative;
        font-size: 30px;
        margin: 0 0.1em;
        width: 1em;
        height: 1em;
        vertical-align: middle;
        border: 4px inset currentColor;
        border-radius: 100%;
        animation: spinner-border 1.2s linear infinite;  /*5.5s linear infinite;*/
    }

    #loading-modal .spinner-border-sm {
        width: 1rem;
        height: 1rem;
        border-width: .2em;
    }

    #loading-modal btn {
        opacity: 1.0;
    }

    #loading-modal .modal-content {
        -webkit-box-shadow: none;
        box-shadow: none;
        border: none;
        opacity: 1.0;
        background-color: transparent;
        text-align: center;
    }

    #loading-modal .modal-content > .modal-body {
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: 1.0;
        background-color: transparent;
        text-align: center;
    }

    #loading-modal .btn.disabled, 
    #loading-modal [disabled].btn, 
    #loading-modal fieldset[disabled] .btn {
        cursor: not-allowed;
        filter: alpha(opacity=100);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: 1.0;
    }
}