<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main role='main'> <div aria-busy='true' aria-label='Loading, please wait.' data-text='Coffee' role='progressbar'> <p>Please wait</p> </div> </main>

@import url(https://fonts.googleapis.com/css?family=Sacramento:400|Montserrat:700); [role="progressbar"] { position: relative; } [role="progressbar"] p { display: block; margin: 0; height: 60px; font-family: Sacramento, cursive; font-size: 3em; text-align: center; } [role="progressbar"]::before, [role="progressbar"]::after { display: block; height: 120px; font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 6em; text-transform: uppercase; content: attr(data-text); } [role="progressbar"]::before { color: #49311c; } [role="progressbar"]::after { display: block; position: absolute; top: 0; left: 0; z-index: 2; color: white; overflow: hidden; } [role="progressbar"][aria-busy="true"]::after { -webkit-animation: load ease-out 10s infinite forwards; animation: load ease-out 10s infinite forwards; } @-webkit-keyframes load { 0%, 10%, 100% { height: 0; } 90% { height: 120px; } } @keyframes load { 0%, 10%, 100% { height: 0; } 90% { height: 120px; } } html, body { margin: 0; padding: 0; height: 100%; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #ebebeb; }