<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="box-loading"> <div class="display-loading open"></div> <div>Loading...</div> </div>

.display-loading.open { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #000; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; margin: 0 auto; position: relative; /*top: 47%;*/ } .box-loading { position: relative; width: 120px; height: 120px; } .box-loading > div { position: absolute; top: 0; text-align: center; width: 100%; margin-top: 45px; font-size: 18px; font-weight: bold; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }