Mobile Development with Ionic and Vue — Loading Indicators
Tags: vue, android, webdev, javascript
Published: 2021-01-23 02:17:53

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

### Loading Indicator

We can add a loading indicator with Ionic Vue with the `ion-loading` component.

For example, we can write:

```
<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>

<script>
import { IonButton, loadingController } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController
        .create({
          cssClass: 'my-custom-class',
          message: 'Please wait...',
          duration: this.timeout,
        });

        await loading.present();

        setTimeout(function() {
        loading.dismiss()
      }, this.timeout);
    }
  },
  components: { IonButton }
});
</script>
```

to use it.

The `loadingController.create` method creates the loading indicator.

The object has the `cssClass` property to set the CSS class.

`message` has the loading indicator message.

`duration` has the duration to show the loading indicator.

`loading.present` shows the loading indicator.

`loading.dismiss` closes the loading indicator.

Also, we can make the loading indicator dismissible:

```
<template>
  <ion-button @click="presentLoading">Show Loading</ion-button>
</template>

<script>
import { IonButton, loadingController } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    timeout: { type: Number, default: 1000 },
  },
  methods: {
    async presentLoading() {
      const loading = await loadingController.create({
        spinner: null,
        duration: this.timeout,
        message: "Click the backdrop to dismiss early...",
        translucent: true,
        cssClass: "custom-class custom-loading",
        backdropDismiss: true,
      });
      await loading.present();

      setTimeout(function () {
        loading.dismiss();
      }, this.timeout);
    },
  },
  components: { IonButton },
});
</script>
```

The `spinner` sets to `null` removes the spinner.

`translucent` makes the loading indicator container translucent.

`backdropDismiss` sets to `true` lets us dismiss the backdrop.

### Progress Bar

We can add the progress bar with the `ion-progress` component.

For instance, we can use it by writing:

```
<template>
  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
</template>

<script>
import { IonProgressBar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonProgressBar }
});
</script>
```

We set the color with the `color` prop.

`value` has the progress value between 0 and 1.

`type` has the type of progress bar.

`reversed` changes the bar movement direction from right to left.

### Skeleton Text

We can add the skeleton text loading indicator.

For example, we can write:

```
<template>
  <div>
    <ion-item>
      <ion-skeleton-text
        animated
        style="width: 27px; height: 27px"
        slot="start"
      ></ion-skeleton-text>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
  </div>
</template>

<script>
import {
  IonAvatar,
  IonIcon,
  IonItem,
  IonLabel,
  IonList,
  IonListheader,
  IonSkeletonText,
  IonThumbnail,
} from "@ionic/vue";
import { call } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonAvatar,
    IonIcon,
    IonItem,
    IonLabel,
    IonList,
    IonListheader,
    IonSkeletonText,
    IonThumbnail,
  },
});
</script>
```

The `ion-skeleton-text` to add the bars for the skeleton text display.

`animated` makes the bars animated.

The `width` style sets the width of the bar.

### Conclusion

We can add various loading indicators with Ionic Vue.