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.
- Free, no sign-up
- REST + MCP
- Updated
- Reviewed by Olgun Ozoktas
Common Patterns
Loading Behavior
Options
Generated Attributes
yoyo:spinning
Full HTML Snippet
<div yoyo:spinning>
Loading...
</div>Live Preview
Loading...
How to Use Loading States
-
Choose Behavior
Select whether to show/hide, add/remove classes, or set attributes. -
Configure Options
Optionally add a delay and target specific actions. -
Preview
Click Simulate Loading to see the behavior in action. -
Copy Attributes
Copy the generated attributes and add them to your Yoyo template.
Common Loading State Patterns
Form Submissions
Disable the submit button and show a spinner while the form is being processed.
Content Updates
Fade the content area while new data is being loaded from the server.
Skeleton Loading
Show skeleton placeholders while components are loading for the first time.
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.
The Yoyo Loading State Builder helps you configure Yoyo's spinning and loading state attributes through an interactive interface. Choose from common patterns or build custom loading behaviors with real-time preview.
Yoyo's loading system supports showing/hiding elements, toggling CSS classes, setting HTML attributes, adding delays, and targeting specific actions, all through declarative template attributes.
How it compares
Instead of looking up the Yoyo README every time you need a loading indicator, use this builder to configure the exact combination of attributes you need. The live preview shows exactly how the loading state will behave.
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.