Loading indicators

Container Loading Indicator

Loading Indicator

A loading indicator used in a container.

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
    </div>
    <p>This is some content inside the container</p>
    <p>The loading indicator must be prepended to it</p>
</div>

Text Loading Indicator

A loading indicator can have text by adding a <div> element inside.

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
        <div>Loading...</div>
    </div>
</div>

Loading Indicator Sizes

A loading indicator can have a size by adding size-X to the container. These sizes are available: size-small.

<div class="loading-indicator-container">
    <div class="loading-indicator size-small">
        <span></span>
        <div>Loading (size-small)</div>
    </div>
</div>

Loading Indicator Alignment

A loading indicator can be aligned to the center by adding indicator-center to the container and/or indicator.

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-center">
        <span></span>
    </div>
</div>

You may add some optional text:

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-center">
        <span></span>
        <div>Loading...</div>
    </div>
</div>

Example

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
    </div>
    <p>This is some content inside the container</p>
    <p>The loading indicator must be prepended to it</p>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator">
        <span></span>
        <div>Loading...</div>
    </div>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-inset">
        <span></span>
        <div>Loading (inset)</div>
    </div>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator size-small">
        <span></span>
        <div>Loading (size-small)</div>
    </div>
</div>

<div class="loading-indicator-container">
    <div class="loading-indicator indicator-center">
        <span></span>
    </div>
</div>

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases