"Loading"
Bootstrap 4.1.1 Snippet by trinhquan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="container"> <div class="row"> <h1 style="width: 100%; text-align: center; font-weight: bold;">Loading</h1> </div> <div class="loader" ng-hide="items.length || noResults"> <svg width="20" height="20" viewBox="0 0 20 20"> <polygon points="0 0 0 20 20 20 20 0" class="rect"></polygon> </svg> </div> <div class="loader1" ng-hide="items.length || noResults"> <svg viewBox="0 0 340 333"> <path class="path" fill="white" stroke="#000" stroke-width="4" d="M66.039,133.545c0,0-2-57,18-67s49-4,65,8 s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 C46.039,146.545,53.039,128.545,66.039,133.545z"/> </svg> </div> </div>
container { position: relative; } .loader { position: absolute; top: 100px; left: 50%; margin-left: -10px; } .loader svg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .loader .rect { fill: none; stroke-width: 6px; stroke: #222; stroke-dasharray: 40; stroke-dashoffset: 100%; -webkit-animation: movedash 1s forwards 0s infinite; -moz-animation: movedash 1s forwards 0s infinite; -o-animation: movedash 1s forwards 0s infinite; -ms-animation: movedash 1s forwards 0s infinite; animation: movedash 1s forwards 0s infinite; } svg:not(:root) { overflow: hidden; } @keyframes movedash { 100% { stroke-dashoffset: 500%; } } /* load 2*/ .loader1 { position: absolute; top: 120px; left: 50%; margin-left: -50px; } .loader1 svg { width: 100px; height: 100px; } .loader1 .path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear alternate infinite; } @keyframes dash { from { stroke-dashoffset: 822; } to { stroke-dashoffset: 0; } }

Related: See More


Questions / Comments: