<link href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="text-center">Pure html and css loader, with checkmark and cross icon</h2> <div class="col-sm-12 contentarea text-center"> <p><span class="close"></span>Authentication </p> <p><span class="check"></span>Fetching your account details </p> <p><span class="close"></span>preparing your account </p> <p><span class="spinner"></span>preparing dashboard</p> </div> </div> </div>

.spinner { border: 2px solid #f3f3f3; display: inline-block; border-radius: 50%; border-top: 2px solid #3498db; width: 15px; height: 15px; position: relative; top: 6px; right: 6px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .data{ padding-left: 15px; } .check{ display:inline-block; padding-right: 12px; } .check:after{ content: ''; display: block; width: 6px; height: 11px; border: solid #53b714; border-width: 0 2px 2px 0; transform: rotate(45deg); } .close { position: relative; display: inline-block; width: 14px; height: 10px; overflow: hidden; margin-right: 7px; right: 3px; } .close:before, .close:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: #da0b06; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } .contentarea{ padding-left:30px; }