ionic react spinner

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';

const Tab3: React.FC = () => {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Spinner Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        {/*-- Default Spinner --*/}
        <IonSpinner />

        {/*-- Lines --*/}
        <IonSpinner name="lines" color='primary' />

        {/*-- Lines Small --*/}
        <IonSpinner name="lines-small" color='secondary' />

        {/*-- Dots --*/}
        <IonSpinner name="dots" color='tertiary' />

        {/*-- Bubbles --*/}
        <IonSpinner name="bubbles" color='success' />

        {/*-- Circles --*/}
        <IonSpinner name="circles" color='warning' />

        {/*-- Crescent --*/}
        <IonSpinner name="crescent" color='medium' />

        {/*-- Paused Default Spinner --*/}
        <IonSpinner paused />
      </IonContent>
    </IonPage>

  );
};

export default Tab3;