Building with AI?
llms.txt
← Back to Examples

Loading & Submit State

Handle submit states with spinners, text changes, style changes, and visibility toggles.

Live Demo

Ready to submit One moment please...

Source Code

Submit State Directives

These directives are active only during form submission (while waiting for API response).

  • •
    on-submit-show

    Show element during submission (hidden by default)

  • •
    on-submit-hide

    Hide element during submission

  • •
    on-submit-class="classes"

    Apply CSS classes during submission

  • •
    on-submit-text="text"

    Change element text during submission (restores original after)

  • •
    on-submit-style="css"

    Apply inline styles during submission

Tip: Test submit states with <snip-form mode="test"> - the form won't actually submit but you can see all state changes.

Transition Options

Control fade transitions when showing/hiding elements.
  • • Default: 150ms fade transition
  • • transition="none" or transition="false" - Disable transitions
  • • transition="300" - Custom duration in milliseconds

Documentation Reference