#Animations

Animations are an essential part crafting beautiful websites that aren't just stunning, but are also alive. Cirrus comes bundled with animated components to help you get started.

#Loading

The loading spinner serves as an elegant indicator for progress in webpages. Just add the animated loading selectors to the element and Cirrus will handle the rest.

By default, the spinner will be horizontally centered and it will override any text. To hide the text, just add the hide-text class.

<div class="card u-flex u-items-center u-justify-center">
    <div class="animated loading hide-text">
        <p>Hidden</p>
    </div>
</div>

The spinner's color could also be changed to text-white with the loading-white class.

<div class="card u-flex u-items-center u-justify-center" style="background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));">
    <div class="animated loading hide-text loading-white">
        <p>Hidden</p>
    </div>
</div>

To show the spinner to the left, use the loading-left class.

<div class="card u-flex u-items-center u-justify-center" style="background: linear-gradient(to right, rgb(142, 45, 226), rgb(74, 0, 224));">
    <div class="animated loading hide-text loading-white">
        <p>Hidden</p>
    </div>
</div>

For the right, use the loading-right class.

<div class="card" style="background: linear-gradient(to right, rgb(255, 88, 88), rgb(248, 87, 166));">
    <div class="animated loading loading-right loading-white text-white u-text-right">
        <p>loading-right</p>
    </div>
</div>

#Effects

Effects are animations that respond to a specific user interaction, such as a user hovering over an element.

#Hover Grow

This is a subtle animation that enlarges a given element on hover. Just add the hover-grow class to your element.

Hover me.

<div class="hover-grow">
    <img src="../../card.svg" />
</div>

#Entrance Animations

These are animations that only run once when the page is loaded or the class is toggled.

<span class="icon"><i class="fa fa-wrapper fa-heart animated bounce" aria-hidden="true"></i></span>

<div class="bg-orange-400 text-white u-text-center animated bounce">
    <p>This is a div!</p>
</div>

<button class="btn-info animated bounce">Button</button>

<span class="icon"><i class="fa fa-wrapper fa-heart animated bounceIn" aria-hidden="true"></i></span>

<div class="bg-orange-400 text-white u-text-center animated bounceIn">
    <p>This is a div!</p>
</div>

<button class="btn-info animated bounceIn">Button</button>

<span class="icon"><i class="fa fa-wrapper fa-heart animated fadeIn" aria-hidden="true"></i></span>

<div class="bg-orange-400 text-white u-text-center animated fadeIn">
    <p>This is a div!</p>
</div>

<button class="btn-info animated fadeIn">Button</button>

#Infinite Animations

These are animations that only run continuously.

<span class="icon"><i class="fa fa-wrapper fa-heart animated pound" aria-hidden="true"></i></span>

<div class="bg-orange-400 text-white u-text-center animated pound">
    <p>This is a div!</p>
</div>

<button class="btn-info animated pound">Button</button>

<div class="card px-4 py-3">
    <div class="u-flex u-gap-3 animated pulse">
        <div>
            <div class="bg-gray-300 u-round-full p-4"></div>
        </div>
        <div class="u-flex-grow-1">
            <div class="line bg-gray-300 w-100p u-round-xs"></div>
            <div class="space"></div>
            <div class="line bg-gray-300 w-100p u-round-xs"></div>
            <div class="grid u-gap-1 mb-0">
                <div class="line bg-gray-300 grid-c-3 u-round-xs"></div>
                <div class="line bg-gray-300 grid-c-9 u-round-xs"></div>
            </div>
        </div>
    </div>
</div>

#Ping

Add the ping animation to simulate pulsing in an out by oscillating the element's opacity. This is a great animation for skeleton loaders as seen below.

⚠ The styling used for the blue dot is not part of Cirrus, only the animation.

3 new unopened messages in the last hour.

@johndoe sent "About your PR, it's mostly good but..."

<div class="u-relative u-inline-flex">
    <div class="u-round-xs u-shadow-lg p-3 bg-blue-100">
        <div class="u-flex u-items-center u-gap-2">
            <div>
                <div class="avatar"><img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=128"></div>
            </div>
            <div><b>3 new unopened messages in the last hour.</b>
                <div class="text-gray-600">@johndoe sent "About your PR, it's mostly good but..."</div>
            </div>
        </div>
    </div><span class="notification u-inline-flex u-absolute u-top-0 u-right-0"><span class="h-100p w-100p u-absolute u-inline-flex animated ping bg-blue-400 u-round-full"></span><span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span></span>
</div>

#Animation Utils

Cirrus comes with a couple of tools you can use to help test or modify animation behavior.

Infinite Animation

This will sustain an animation when the user is on the page. This even works for animations not designed to be infinitely looped. The only change needed is the addition of the infinite class to the component.

Below is an example using the fade in animation.

<button class="btn-primary animated fadeIn infinite">Infinitely Fading</button>

Now this animation seems to cut off at the end of the cycle. To make it alternate, just add the alternate class to make the animation more fluid.

<button class="btn-primary animated fadeIn infinite alternate">Alternating Fading</button>

Pausing Animations

This is great with testing your animations and works well with JavaScript calls also. All you need to do is add a class to the animated component called paused.

<button class="btn-primary animated bounce infinite alternate paused">Paused</button>