Combine multiple loops to create new variants


It is possible to combine multiple loops, but you need to nest data-loops into each other, because only one loop value in data-loop is allowed.

Combining data-loop and data-fx

Although it is possible to use data-loop in combination with data-fx in some cases, it is recommended to separate them into different elements.

This works
data-loop="pulse" will work with data-fx="h:bg-primary", because the first one is using transform and second one’s using background-color, so they do not interfere.

This doesn’t work
data-loop="pulse" will not work with data-fx="h:push-up" because both are using the transform property so they are interfering.


Combination of data-loop="circle" and data-loop="pulse".

Circle & Blink
<div data-loop="circle">
  <div data-loop="blink">Circle & Blink</div>

Combination of data-loop="pulse" and data-loop="radiate radiate-grey".

Pulse & Radiate
<div data-loop="pulse">
  <div data-loop="radiate radiate-grey">Pulse & Radiate</div>

Combination of data-loop="swing", data-loop="pulse" and data-loop="radiate radiate-primary".

Swing & Pulse & Radiate
<div data-loop="swing">
  <div data-loop="pulse">
    <div data-loop="radiate radiate-primary">Swing & Pulse & Radiate</div>