Loading/spinner image for Plone 5

Plone Support Add-on Development
1

I'm using pat-inject in Plone 5, but it has no spinner/loading image. There's some scss for it in 6 but font/content are not applicable to Plone 5. Surely there's an appropriate font/content available in Plone 5 already, but where can I find it?

2

Is using bootstrap spinners an option ?
Something like

<div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
 </div>
3

Using other spinners is fine, I just wanted the style to match what was already in Plone 5. I think my solution is going to be to not do that - if the spinner here looks different than a spinner on another part of the site, so bet it. I can't think of an example where it appears anyway (and maybe that's because there just isn't a default one in 5). These will be moving to 6 soon enough anyway.

4

AFAIK there's the Loading utility in mockup-utils for Plone 5.2 (using mockup 3.x). See https://github.com/plone/mockup/blob/3.x/mockup/js/utils.js#L198

And this is and example how pat-plone-modal uses it https://github.com/plone/mockup/blob/3.x/mockup/patterns/modal/pattern.js#L854

And this also still exists in mockup#master ...

In a Plone 6 project here we also use pat-inject a lot and there we customized the executing css class which is automatically applied on the node where the content gets loaded (see https://github.com/Patternslib/Patterns/blob/master/src/pat/inject/inject.js#L35 where you could also customize these classes) with a bootstrap component:

// pat-inject status
.executing::after {
    content: " ";
    @extend .spinner-grow;
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    margin-left: 0.5rem;
    position: absolute;
    margin-top:0.5rem;
}