Phoenix Reisen Styleguide
Examples
Default styling

Schiff
Daten werden geladen...


Daten werden geladen...

.loader--overlay
zentriert & absolut positioniert über Container mit .loader-parent - inkl. seichtem Hintergrund

Schiff
Daten werden geladen...


Daten werden geladen...

Markup
<div class="loader-parent gray6" style="height: 250px">
    <article class="loader">
        <p class="loader__spinner">
            <img src="/imgs/ship.gif" alt="Schiff" />
            <br />
            <i class="fab fa-cuttlefish fa-spin mr1"></i>
            Daten werden geladen...
        </p>
    </article>
</div>
<div class="loader-parent gray6" style="height: 200px">
    <article class="loader [modifier class]">
        <p class="loader__spinner">
            <i class="fab fa-cuttlefish fa-spin"></i>
            <br />
            Daten werden geladen...
        </p>
    </article>
</div>
Source: src/components/_loader.scss, line 1