# Loading modal - code

> Code examples and API documentation for the ix-modal

import LoadingService from "@site/docs/autogenerated/utils/loading.service.mdx";

# Loading modal - code

## Loading

How to open a loading modal is independent of the framework in use. Note that you need to import `showModalLoading` from the core package `@siemens/ix`.

### React Examples

#### loading.tsx
```tsx
import { ModalLoadingContext } from '@siemens/ix';
import { IxButton, showModalLoading } from '@siemens/ix-react';

export default () => {
  const startLoading = async () => {
    let count = 0;
    const progress: ModalLoadingContext = await showModalLoading({
      message: 'Loading 0/2',
    });
    const interval = setInterval(() => {
      count++;
      progress.update(`Loading ${count}/2`);

      if (count === 2) {
        progress.finish('Done');
        clearInterval(interval);
      }
    }, 1000);
  };
  return <IxButton onClick={() => startLoading()}>Start loading</IxButton>;
};
```

### Angular Examples

#### loading.ts
```ts
import { Component } from '@angular/core';
import { ModalLoadingContext } from '@siemens/ix';
import { LoadingService } from '@siemens/ix-angular';

@Component({
  standalone: false,
  selector: 'app-example',
  template: ` <ix-button (click)="startLoading()">Start loading</ix-button> `,
})
export default class Loading {
  constructor(private readonly loadingService: LoadingService) {}

  startLoading = async () => {
    let count = 0;
    const progress: ModalLoadingContext =
      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
    const interval = setInterval(() => {
      count++;
      progress.update(`Loading ${count}/2`);

      if (count === 2) {
        progress.finish('Done');
        clearInterval(interval);
      }
    }, 1000);
  };
}
```

### Angular Standalone Examples

#### loading.ts
```ts
import { Component } from '@angular/core';
import { ModalLoadingContext } from '@siemens/ix';
import { IxButton, LoadingService } from '@siemens/ix-angular/standalone';

@Component({
  selector: 'app-example',
  imports: [IxButton],
  template: ` <ix-button (click)="startLoading()">Start loading</ix-button> `,
})
export default class Loading {
  constructor(private readonly loadingService: LoadingService) {}

  startLoading = async () => {
    let count = 0;
    const progress: ModalLoadingContext =
      await this.loadingService.showModalLoading({ message: 'Loading 0/2' });
    const interval = setInterval(() => {
      count++;
      progress.update(`Loading ${count}/2`);

      if (count === 2) {
        progress.finish('Done');
        clearInterval(interval);
      }
    }, 1000);
  };
}
```

### Vue Examples

#### loading.vue
```vue
<script setup lang="ts">
import { IxButton, showModalLoading } from '@siemens/ix-vue';
import type { ModalLoadingContext } from '@siemens/ix';

const startLoading = async () => {
  let count = 0;
  const progress: ModalLoadingContext = await showModalLoading({
    message: 'Loading 0/2',
  });
  const interval = setInterval(() => {
    count++;
    progress.update(`Loading ${count}/2`);

    if (count === 2) {
      progress.finish('Done');
      clearInterval(interval);
    }
  }, 1000);
};
</script>

<template>
  <IxButton @click="startLoading">Start loading</IxButton>
</template>
```

## API for loading modal utils (JavaScript, React, Vue)

### Functions

#### createShowModalLoading

```ts
createShowModalLoading(dependencies: ShowModalLoadingDependencies): DependencyFunction&lt;unknown, ShowModalLoadingDependencies&gt;;
```

{ "Create a loading modal helper with custom element dependencies." }

#### showModalLoading

```ts
showModalLoading(options: ModalLoadingOptions): Promise&lt;ModalLoadingContext&gt;;
```

{ "" }

## API for LoadingService (Angular)

### Functions

#### showModalLoading

```ts
showModalLoading(options: ModalLoadingOptions): Promise&lt;ModalLoadingContext&gt;;
```

{ "Displays a loading modal with a message" }