Keyframe animations for cards, icons, loaders and headings - drop a class on an element and it comes alive.
1Multi-Layer Spinner
A loading indicator made of three counter-rotating rings in the theme colours. Class: fx-multi-layer-spinner
Loading...
Preparing your community
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="text-center">
<div class="fx-multi-layer-spinner" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="small text-body-secondary mt-3 mb-0">Preparing your community</p>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-multi-layer-spinner {
position: relative; display: inline-block; width: 4rem; height: 4rem; border-radius: 50%;
border: 4px solid transparent; border-top-color: var(--wt-primary);
animation: fx-multi-layer-spinner-spin 1.1s linear infinite;
}
.fx-multi-layer-spinner::before, .fx-multi-layer-spinner::after { content: ""; position: absolute; border-radius: 50%; border: 4px solid transparent; }
.fx-multi-layer-spinner::before { inset: 4px; border-top-color: var(--wt-secondary); animation: fx-multi-layer-spinner-spin 1.7s linear infinite reverse; }
.fx-multi-layer-spinner::after { inset: 14px; border-top-color: var(--wt-accent); animation: fx-multi-layer-spinner-spin .8s linear infinite; }
@keyframes fx-multi-layer-spinner-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.fx-multi-layer-spinner, .fx-multi-layer-spinner::before, .fx-multi-layer-spinner::after, .fx-multi-layer-spinner *, .fx-multi-layer-spinner *::before, .fx-multi-layer-spinner *::after { animation: none !important; transition: none !important; }
}2Orbital Motion
Two small planets circle around an avatar, logo or icon on separate orbits. Class: fx-orbital-motion
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="fx-orbital-motion">
<img src="../assets/img/avatar-5.svg" alt="Team member avatar" class="rounded-circle shadow" style="width:4.5rem;height:4.5rem">
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-orbital-motion {
position: relative; display: inline-grid; place-items: center; width: 9rem; height: 9rem;
border-radius: 50%; border: 1px dashed rgba(var(--wt-primary-rgb), .45);
}
.fx-orbital-motion::before, .fx-orbital-motion::after {
content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none;
}
.fx-orbital-motion::before {
width: 14px; height: 14px; margin: -7px; background: var(--wt-primary);
box-shadow: 0 0 10px rgba(var(--wt-primary-rgb), .7);
animation: fx-orbital-motion-outer 5s linear infinite;
}
.fx-orbital-motion::after {
width: 10px; height: 10px; margin: -5px; background: var(--wt-accent);
animation: fx-orbital-motion-inner 3.2s linear infinite reverse;
}
@keyframes fx-orbital-motion-outer { from { transform: rotate(0deg) translateX(4.5rem) rotate(0deg); } to { transform: rotate(360deg) translateX(4.5rem) rotate(-360deg); } }
@keyframes fx-orbital-motion-inner { from { transform: rotate(0deg) translateX(3.1rem); } to { transform: rotate(360deg) translateX(3.1rem); } }
@media (prefers-reduced-motion: reduce) {
.fx-orbital-motion, .fx-orbital-motion::before, .fx-orbital-motion::after, .fx-orbital-motion *, .fx-orbital-motion *::before, .fx-orbital-motion *::after { animation: none !important; transition: none !important; }
}3Heartbeat
A double-beat pulse for like buttons, favourite icons and notification badges. Class: fx-heartbeat
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<span class="display-4 text-danger fx-heartbeat"><i class="bi bi-heart-fill" aria-hidden="true"></i></span>
<button type="button" class="btn btn-outline-danger rounded-pill"><span class="fx-heartbeat"><i class="bi bi-heart-fill" aria-hidden="true"></i></span> 197 likes</button>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-heartbeat { display: inline-block; animation: fx-heartbeat-beat 1.5s ease-in-out infinite; transform-origin: center; }
@keyframes fx-heartbeat-beat {
0%, 40%, 100% { transform: scale(1); }
12% { transform: scale(1.2); }
24% { transform: scale(.96); }
32% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
.fx-heartbeat, .fx-heartbeat::before, .fx-heartbeat::after, .fx-heartbeat *, .fx-heartbeat *::before, .fx-heartbeat *::after { animation: none !important; transition: none !important; }
}