ionic react progressbar

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  closeCircle, home, star, navigate,
  informationCircle, checkmarkCircle, shuffle
} from 'ionicons/icons';

const Tab2: React.FC = () => {
  const [showLoading, setShowLoading] = useState(true);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Progressbar Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Default Progressbar --*/}
        <IonProgressBar></IonProgressBar><br />

        {/*-- Default Progressbar with 50 percent --*/}
        <IonProgressBar value={0.5}></IonProgressBar><br />

        {/*-- Colorize Progressbar --*/}
        <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
        <IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />

        {/*-- Other types --*/}
        <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
        <IonProgressBar type="indeterminate"></IonProgressBar><br />
        <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
      </IonContent>
    </IonPage >
  )
}

export default Tab2;