Set different loop values for different screen sizes


When using a custom loop animation value, there is a chance that one value is too high for smaller resolution. For example, data-loop="circle [5rem]" will make an element move in 5rem diameter, which can be too high for xs resolution. In this case, the responsive values for data-loops will be very helpful.

How it works

Add data-loop="{loop-variant} [{value}]" for xs and up resolution or data-loop="{loop-variant} [{breakpoint}:{value}]" for sm, md, lg and xl resolution. If you set [md:{value}] than the value will be applied for md resolution an up, means you don’t need to set values for lg and xl resolution again. Don’t use spaces inside the custom values!


This example shows data-loop="pulse [0.5] [md:1.5] [xl:2]" with responsive values:

  • [0.5]: this makes loop scaling from 1 (default) to .5 from the xs resolution up
  • [md:1.5]: this makes loop scaling from 1 (default) to 1.5 from the md resolution up
  • [xl:2]: this makes loop scaling from 1 (default) to 2 for the xl resolutions

Resize a browser window to see it live.

<div data-loop="pulse [0.5] [md:1.5] [xl:2]">pulse</div>