---
title: "Yoyo Loading State Builder"
description: "Build Yoyo spinning and loading state attributes interactively. Configure show/hide, CSS class toggling, attribute setting, and delays with a live preview."
url: https://findutils.com/developers/yoyo-loading-state-builder/
category: developers
---

# Yoyo Loading State Builder

Build Yoyo spinning and loading state attributes interactively. Configure show/hide, CSS class toggling, attribute setting, and delays with a live preview.

**Use this tool:** [Yoyo Loading State Builder](https://findutils.com/developers/yoyo-loading-state-builder/)

## Programmatic access

- REST id `yoyo-loading-state-builder`: POST https://api.findutils.com/api/tools/yoyo-loading-state-builder/execute (reference: https://findutils.com/api/yoyo-loading-state-builder/)
- MCP tool `yoyo_loading_state_builder` on https://mcp.findutils.com (reference: https://findutils.com/mcp/yoyo-loading-state-builder/)

## Why Use the Loading State Builder?

Yoyo's loading state system has many modifier combinations: show/hide elements, add or remove CSS classes, set HTML attributes, and target specific actions. This builder helps you configure the correct attributes without memorizing the syntax.

## Loading State Tips

- Use delay to avoid showing spinners for fast requests (under 200ms).
- Use yoyo:spin-on to prevent spinners from showing for every action on the page.
- Combine class addition with attribute setting for robust loading UX.
- The aria-busy attribute is great for accessibility during loading states.

## Frequently Asked Questions

### What is yoyo:spinning?

yoyo:spinning is a Yoyo directive that controls element visibility during server requests. By default, elements with yoyo:spinning are hidden and only shown while a request is in progress.

### What does yoyo:spin-on do?

yoyo:spin-on limits the loading state to specific actions. For example, yoyo:spin-on="save" only shows the loading indicator when the save action is triggered, not for other actions.

### Can I combine multiple loading behaviors?

Yes. You can use multiple yoyo:spinning modifiers on the same element, such as adding a class and setting an attribute simultaneously. Use the Combination mode in this builder.

### What is the delay modifier?

The delay modifier (yoyo:spinning.delay) prevents the loading indicator from showing for quick requests. If the request completes before the delay, the indicator is never shown, avoiding flickering.

### How does yoyo:spinning.class work?

yoyo:spinning.class adds a CSS class to the element during loading, and removes it when the request completes. yoyo:spinning.class.remove does the opposite, removing the class during loading.

### Does the Yoyo Loading State Builder require a signup?

No. It is available with no signup and no usage limits. The attributes are built in your browser and shown in a live preview.

### How do I avoid a spinner flash on fast requests?

Add the delay modifier. A spinner that waits about 200 ms before showing never appears for a request that finishes sooner.

### How do I make the loading state accessible?

Set the aria-busy attribute on the element with the attribute-setting option, so screen readers announce that the region is updating.

## Related Tools

- [Yoyo Component Generator](https://findutils.com/developers/yoyo-component-generator/)
- [Yoyo Config Generator](https://findutils.com/developers/yoyo-config-generator/)
- [Robots.txt Generator](https://findutils.com/seo/robots-txt-generator/)
- [Meta Tag Generator](https://findutils.com/seo/meta-tag-generator/)
- [JSON-LD Generator](https://findutils.com/seo/json-ld-generator/)