Ionic Spinner

The Ionic Spinner component provides several SVG spinners. The spinners are visual indicators that indicate the app is loading content or performing another process so that the user needs to wait on.

The default spinner is different for different platforms. For example, the iOS application has the default Spinner lines, whereas, the android application has the default Spinner crescent. If the platform is not the iOS nor the android, the default Spinner will be crescent. We can access the Ionic Spinner by using a standard <ion-spinner> component.

Example

This example shows the use of default spinner in an Ionic application.

Output:

When you execute the above code snippets, it will give the following output. Here you can see the default spinner loading, which is a line.

Note: We can also change the default Spinner by using the property name. The following example explains the different types of Spinner used in the Ionic application.

Example

Output:

Pause Spinner

The Ionic Spinner also allows us an attribute to pause the animation of the Spinner component. By default, the paused attribute is false. If it is true, the Spinner animation will be paused. The following example helps to understand it more clearly.

Example

In this example, we had set the attribute paused in the circle spinner.

Output:

When the above code executes, you will get the following output. Here, you can see that the circle spinner will be paused.

Setting Time

The Ionic also allows us to set the time duration to the Spinner component. It means when the time which you have set is reached, the visual loading indication of the Spinner component will be disappeared.

Example

Home.page.html

Home.page.ts

Here, we have set the timeout duration for the Spinner component.

Output:

When you execute the above code snippets, it will give the following output.

Whenever the time limit which you had set is reached, the visual indicator of line spinner loading will be disappeared. We can see it in the below image.

Styling the Spinner

We can also set the different styling or color for the Spinner component. The following example explains the use of different color styling inside the Spinner component.

Example

Output:

When you run the Ionic application, it will give the following screen. Here, you can see that each of the Spinner components stylings is different.