---
type: "Components"
category: "Core"
parent: "Loader"
title: "Other"
date: "2005-10-10"
---

## Background

Use **Tailwind CSS** to assign variant (e.g. [background-color](https://tailwindcss.com/docs/background-color), [opacity](https://tailwindcss.com/docs/opacity)).

<demo>
  <demoinline src="demos/components/loader/background-spinner">
  </demoinline>
  <demoinline src="demos/components/loader/background-filler">
  </demoinline>
</demo>

## Activation

Use **Tailwind CSS** to assign loader activation animation.

Use [Xt.on and Xt.off](/components/global/javascript#xt-on-and-xt-off) to activate and animate.

Example loader spinner with **activation animation**.

<demo>
  <demoinline src="demos/components/loader/js-spinner">
  </demoinline>
</demo>

Example loader filler with **activation animation**.

<demo>
  <demoinline src="demos/components/loader/js-filler">
  </demoinline>
</demo>
