Spinners
Like progress bars, spinners can be used to show progress.
In contrast to the determinated progress bar, spinners are always moving circular.
Regular - one color
<?= \macgyer\yii2materializecss\widgets\Spinner::widget() ?>
<div id="w0" class="preloader-wrapper active">
<div class="spinner-layer">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
Rendered result
Changing the size and color
This widget is supporting the Materialize default sizes and colors for spinners.
If you are familiar with CSS, feel free to customize sizes and colors as you wish.
Assign the desired values for sizing to the spinner's wrapper (.preloader-wrapper) and the color
value to the .spinner-layer element.
<?= \macgyer\yii2materializecss\widgets\Spinner::widget([
'size' => \macgyer\yii2materializecss\widgets\Spinner::SIZE_BIG,
'color' => \macgyer\yii2materializecss\widgets\Spinner::COLOR_RED,
]) ?>
<div id="w1" class="preloader-wrapper active big">
<div class="spinner-layer spinner-red-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
Rendered result
Flashing colors
<?= \macgyer\yii2materializecss\widgets\Spinner::widget([
'flashColors' => true,
]) ?>
<div id="w2" class="preloader-wrapper active big">
<div class="spinner-layer spinner-blue">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-yellow">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
<div class="spinner-layer spinner-green">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
Rendered result
Hint
If flashColors has been set to true, this setting overrides the color property of the
spinner.