How to create a Loading screen | Ionic Design Kit

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Loading Screen acts as a pivotal component in user interface design, serving as the gateway to the application's content and functionality. It plays a crucial role in providing users with visual feedback on the progress of loading processes, ensuring a smooth and engaging user experience. By presenting an aesthetically pleasing and informative interface, the Loading Screen sets the tone for the user's interaction with the application.

This article offers a comprehensive guide, equipping designers and developers to seamlessly integrate a user-centric Loading Screen into their applications. This effortless integration is facilitated by leveraging design components from the Ionic Kit, which is built on the solid foundation of the extensive Ionic framework library.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start loading-screen blank --type=react

3. Get inside the project directory

cd loading-screen

4. Create page Loading.tsx inside src/pages and add code

import { IonPage } from '@ionic/react';

const Loading: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default Loading;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add the header inside the page

For convenience, we will be using the layout structure recommended by Ionic for our screens. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
   ...
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Add IonButton inside IonContent

Inside the IonContent component, add the elements needed according to your design and goals. In our case it is Checkout Screen. But we have one addition. For the button, we specify an additional ID attribute. This is necessary so that, in the future, clicks on this specific button can be tracked.

<IonContent>
  ...
  <IonButton
    expand='block'
    className='ion-margin'
    id='loading'>
    Pay now
  </IonButton>
</IonContent>

7. Add the IonLoading component

<IonContent>
  ...
  <IonButton
    expand='block'
    className='ion-margin'
    id='loading'
  >
    Pay now
  </IonButton>
  <IonLoading />
</IonContent>

8. Setting the spinner attribute

It controls the appearance of the animation.

<IonLoading spinner='circle'/>

9. Setting the trigger attribute, which will point to the ID of the button that, when clicked, will display IonLoading

<IonLoading 
  spinner='circle' 
  trigger='loading'
/>

10. Setting the message attribute, where we specify the message that will be displayed

<IonLoading 
  spinner='circle'
  trigger='loading'
  message='Please wait...'
/>

11. In the duration attribute, we specify the display duration

<IonLoading 
  spinner='circle'
  trigger='loading'
  message='Please wait...'
  duration={3000}
/>

12. If desired, you can set the className attribute and specify styles according to your design

<IonLoading 
  spinner='circle'
  trigger='loading'
  message='Please wait...'
  className='custom-loading'
  duration={3000}
/>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!