<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;
}
}
