Components Alerts
Accordion
Badges
Box
Buttons
Cards
Hero
Modals
Media Object
Navbars
Pagination
Progress
Spinners
Tables
Layout Flexbox
Forms Text
Labels
Other
Others Animations
Customizing
Parallax
Typography
Utils

Spinners

Updated on pzplUI 1.0


Spinners



<div class="spinner text-normal" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner text-success" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner text-error" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner text-danger" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner text-info" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner text-dark" role="status">
    <span class="sr-only">Loading...</span>
</div>
<div class="spinner text-white" role="status">
    <span class="sr-only">Loading...</span>
</div>

Usage with margin utilities

If you want to have some space beetween spinners and content, you can use the margin utilities!



<div class="spinner text-normal m5" role="status">
    <span class="sr-only">Loading...</span>
</div>