Skip to content

Search htmltool.io

Search animations, patterns and icons

.da-flip-square

Flip Square

Loaders / Classic. Loops until you remove the class. Adjust the timing, then copy it as CSS, a preprocessor mixin, an ES module, a custom element or a Tailwind class.

Loaders animation, 1.2 s, ease-in-out, repeats forever.

Timing
1.2 s
0 s
∞

Details

Category
Loaders / Classic
Class
.da-flip-square
Trigger
On load
Duration
1.2s
Delay
0s
Easing
ease-in-out
Iterations
infinite
Infinite
Yes
Origin
center

Snippets

flip-square.html
<link rel="stylesheet" href="https://cdn.htmltool.io/animations/1.0.0/css/animations/flip-square.min.css">

<div class="da-flip-square__fsq da-flip-square"></div>

Press C while the code is focused to copy.

Spinner Ring
Loadersloop
Dual Ring
Loadersloop
Bouncing Dots
Loadersloop
Pulse Dots
Loadersloop
Equalizer
Loadersloop
Ripple
Loadersloop
Progress Bar
Loadersloop
Skeleton Shimmer
Loadersloop
Orbit
Loadersloop