Setting Up a Loading State

How it works

The loading state for HTML forms helps bridge the awkward gap when your form is retrieving data and isn’t quite ready to be viewed yet.

Example

This example uses the form autosave and pre populates previous data responses. To show the loading state during the pre populate process, we’ve added an the attributes data-os-element=”loading” and data-os-for=”${form_uuid}”. This attributes lets you show a specific element while an element is loading, specifically:

• An Input is saving data
• A Form is loading default data

Data field inputs also have an data-os-loadingclass="${classname}" attribute. The attribute allows you to specify a class name which will be added to the element when the associated input is being auto saved.