Creating an animated icon for Flexible icons

This document discusses creating an animated icon using CSS animation and the Flexible icons API. Before diving in here you should make sure you've read and understood Image-based overrides for Flexible icons which provides more detailed descriptions of each of the steps we'll go through here.

So let's put together a custom CSS and HTML based loader icon which we'll use to replace the default 'loading' icon. Again let's place this within the context of our hypothetical custom theme 'Kakapo'.

Override template data

We open up (or create) our theme's pix/flex_icons.php file and override the template and template data used to render the 'loading' icon:

// Copyright goes here.
	
$icons = [
    'loading' => [
        'template' => 'theme_kakapo/single_div_icon',
        'data' => [
            'classes' => 'single-div-icon--spinner',
        ]
    ]
];

Next we need to create our template theme/kakapo/templates/single_div_icon.mustache. Unsurprisingly the spinner itself requires only a single div but we'll also add in required flex-icon elements and accessibility markup:

{{! Copyright info would go here. }}

<div data-flex-icon="{{identifier}}" class="flex-icon single-div-icon-wrapper"><div class="single-div-icon
{{#classes}} {{
.}}{{/classes}}{{#customdata.classes}} {{.}}{{/customdata.classes}}"{{#customdata.title}} title="{{.}}"{{/customdata.title}}>
</div>{{#customdata.alt}}<span class="sr-only">{{.}}</span>{{/ customdata.alt }}</div>

We'll add some styles using Less in our theme based on this spinner example:

// Copyright info here.

.single-div-icon--spinner {
    width: 1.3em;
    height: 1.3em;
    background-color: @text-color;
    animation: single-div-icon__rotateplane 1.2s infinite ease-in-out;
}

@keyframes single-div-icon__rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

After compiling the Less and purging the caches we should see our new loading icon replacing the default when we open the Site administration dropdown on the home page and a preview rendered in the listing at Site administration > Appearance > Themes > Element library and following the Flexible icons link.