Framework7 has a nice preloader indicator. Preloader is made with SVG and animated with CSS so it can be easily resized.
If you look for a Modal (popup) preloader/indicator look in the Modals section: Modal Preloader, Modal Indicator.
By default, Preloader available in two colors: the default is for a light background and another one for dark background. The HTML is pretty easy, just create any element (for example <span>) with "preloader" class:
<body>
...
<div class="page-content">
<div class="content-block row">
<!-- Default preloader -->
<div class="col-25">
Default<br>
<span class="preloader"></span>
</div>
<!-- White preloader, additional "preloader-white" class -->
<div class="col-25 col-dark">
White<br>
<span class="preloader preloader-white"></span>
</div>
<!-- Default with custom size -->
<div class="col-25">
Big<br>
<span style="width:42px; height:42px" class="preloader"></span>
</div>
<!-- White with custom size -->
<div class="col-25 col-dark">
White<br>
<span style="width:42px; height:42px" class="preloader preloader-white"></span>
</div>
</div>
<div class="content-block row">
<!-- Red -->
<div class="col-25">
Red<br>
<span class="preloader preloader-red"></span>
</div>
<!-- Blue -->
<div class="col-25">
Blue<br>
<span class="preloader preloader-blue"></span>
</div>
<!-- Yellow -->
<div class="col-25">
Yellow<br>
<span class="preloader preloader-yellow"></span>
</div>
<!-- Green -->
<div class="col-25">
Green<br>
<span class="preloader preloader-green"></span>
</div>
</div>
</div>
...
<style>
.col-25 {
padding:5px;
text-align:center;
}
.col-dark {
background:#222;
}
</style>
</body>