> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Loading

> The Loading Screen component offers a built-in loading component that you can display when background process is happening.

## Implementation

<Steps>
  <Step title="Add HTML Container">
    ```html theme={null}
    <div id="form"></div>
    ```
  </Step>

  <Step title="Initialize Result Component">
    ```javascript theme={null}
    // Create loading form component for individual processing
    const loading = oneSdkInstance.component("form", {
       name: "LOADING",     // Personal information form
    });
    ```
  </Step>

  <Step title="Mount Component">
    ```javascript theme={null}
    // Mount loading form to DOM element with id "form"
    loading.mount("#form");
    ```
  </Step>
</Steps>

## Configuration Options

<AccordionGroup>
  <Accordion title="Basic Properties">
    ```typescript theme={null}
    interface LoadingConfig {
      name: "LOADING";            // Screen identifier
      title: TitleConfig;        // Title configuration
      descriptions: Description[]; // Description array
    }
    ```
  </Accordion>

  <Accordion title="Component Parts">
    <CardGroup cols={2}>
      <Card title="Title" icon="heading">
        ```typescript theme={null}
        interface TitleConfig {
          label: string;
          style?: "ff-title";
        }
        ```
      </Card>

      <Card title="Descriptions" icon="align-left">
        ```typescript theme={null}
        interface Description {
          label: string;
          style?: "ff-description";
        }
        ```
      </Card>
    </CardGroup>
  </Accordion>
</AccordionGroup>