CSS loader macro

Step one: include the loader macro

We're using a fancy animated loader for feeds. Using the loader macro ensures you'll get all the right markup and styles to create it without copying and pasting a bunch of divs.

Note: We use this same loader for all COPE tools including the people, research, events and info sessions.

This code should go near the top of the page before the main_content block.


{%- import "macros/loader.html" as loader -%}

Step two: Place the loader on the page where your feed will go


<article class="third">
{{ loader.loader(
    "Alumni in the news",
    "h3",
    "alumni-news-container"
    ) }}
</article>

The loader macro will render HTML like this:


<h3>Alumni in the news</h3>
<div id="alumni-news-container">
    <div class="loader small">
        <div class="loader-figure small"></div>
        <p class="loader-label">Loading&hellip;</p>
    </div>
</div>

And it looks like this:

Alumni in the news

Loading…

You might have noticed that the content and markup in the rendered HTML matches the parameters we passed into the macro.

We passed in "Alumni in the news" and you can see that gets inserted into the heading.

You may also have noticed that the second parameter we passed in is "h3" and our heading is an h3.

Finally, we passed in "alumni-news-container" and that's what the id is for our alumni news container. (That'll be important later on, because we're going to tell the newsfeed macro to put the rendered newsfeed there.)

The loader macro has a few more parameters. Below is a list of parameters and their default values:

Loader macro parameters
Order	Parameter	Description	Default
first	Heading text	What you want the heading to say	Latest news
second	Heading tag	Which heading tag to use	h3
third	Container id	The id of the element where the feed will go	news-container
fourth	Heading classes	Any classes you want to add to the heading; i.e., `margin-top-1`	None (no classes will be added)
fifth	Additional loader classes	Any classes you want to add to the loader element	small
sixth	Loader text	Text to display while the feed is loading	Loading…
seventh	Additional container classes	Any additional classes you wish to add to the container for the feed content	None (no classes will be added)
eighth	Use a heading	Insert a heading before the container for the feed content	`true`

Calling macro with all parameters



{{ loader.loader(
    "Latest news", {# Heading text #}
    "h3", {# Heading tag #}
    "alumni-news-container", {# Container id #}
    null, {# Heading tag classes #}
    "small", {# Additional loader classes #}
    "Loading…", {# Loader text #}
    null, {# Additional container classes #}
    true {# Use a heading tag #}
    ) }}