#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.
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.
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 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.
loading-left
<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.
loading-right
<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 white u-text-right">
<p>loading-right</p>
</div>
</div>
This is a subtle animation that enlarges a given element on hover. Just add the hover-grow
class to your element.
<div class="hover-grow">
<img src="../../card.svg" />
</div>
These are animations that only run once when the page is loaded or the class is toggled.
Bouncing animation with a glyph.
<span class="icon"><i class="fa fa-wrapper fa-heart animated bounce" aria-hidden="true"></i></span>
Bouncing animation with a div.
This is a div!
<div class="bg-orange-400 white u-text-center animated bounce">
<p>This is a div!</p>
</div>
Bouncing animation with a button.
<button class="btn-info animated bounce">Button</button>
Bounce in animation with a glyph.
<span class="icon"><i class="fa fa-wrapper fa-heart animated bounceIn" aria-hidden="true"></i></span>
Bounce in animation with a div.
This is a div!
<div class="bg-orange-400 white u-text-center animated bounceIn">
<p>This is a div!</p>
</div>
Bounce in animation with a button.
<button class="btn-info animated bounceIn">Button</button>
Fade in animation with a glyph.
<span class="icon"><i class="fa fa-wrapper fa-heart animated fadeIn" aria-hidden="true"></i></span>
Fade in animation with a div.
This is a div!
<div class="bg-orange-400 white u-text-center animated fadeIn">
<p>This is a div!</p>
</div>
Fade in animation with a button.
<button class="btn-info animated fadeIn">Button</button>
These are animations that only run continuously.
Pulse animation with a glyph.
<span class="icon"><i class="fa fa-wrapper fa-heart animated pulse" aria-hidden="true"></i></span>
Pulse animation with a div.
This is a div!
<div class="bg-orange-400 white u-text-center animated pulse">
<p>This is a div!</p>
</div>
Pulse animation with a button.
<button class="btn-info animated pulse">Button</button>
Cirrus comes with a couple of tools you can use to help test or modify animation behavior.
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>
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>