Working with Progress Indicators

1. Implementing Progress Bar

Property	Description	Default	Notes
value	Current progress value (0-100)	`0`	Updates the progress bar visually
max	Maximum value for progress bar	`100`	Defines the upper bound of progress
color	Color of the progress bar	`primary`	Supports `primary`, `secondary`, `success`, `warning`, `danger`

Example: Basic Progress Bar

<ion-progress-bar value="0.5"></ion-progress-bar>

Example: Progress Bar with Custom Max Value

<ion-progress-bar value="75" max="100"></ion-progress-bar>

Example: Progress Bar with Color

<ion-progress-bar value="0.75" color="success"></ion-progress-bar>

2. Setting Progress Value

Property	Values	Description
value	`number`	The current progress value, typically between 0 and 100.
max	`number`	The maximum value the progress can reach. Defaults to 100.
color	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'`	Color variant for the progress bar.

Example: Setting Progress Value

<ion-progress-bar value="0.5" max="1"></ion-progress-bar>

<ion-progress-bar value="75" max="100"></ion-progress-bar>

Note: The value property should be a number between 0 and the max value.

3. Using Buffer Progress

Property	Description	Default	Notes
bufferProgress	Enables buffer progress indicator for loading content	`false`	Used with `<ion-content>` to show loading state
bufferProgressColor	Color of the buffer progress bar	`primary`	Supports all Ionic color variants

Example: Buffer Progress in Ionic

<ion-content bufferProgress="true" bufferProgressColor="secondary">
  <!-- Content here -->
</ion-content>

Note: The bufferProgress property is useful for indicating content loading in scenarios where the actual content might not be fully rendered yet.

4. Using Indeterminate Progress

Property	Description	Default	Notes
indeterminate	Boolean flag to enable indeterminate progress	`false`	When `true`, progress bar shows infinite animation
mode	Progress mode (e.g. `indeterminate`, `determinate`)	`determinate`	Used to switch between progress styles

Example: Indeterminate Progress Bar

<ion-progress-bar indeterminate=""></ion-progress-bar>

Note: Indeterminate progress is ideal for operations where the duration is unknown or unpredictable.

Warning: Do not use indeterminate progress for operations that can be measured or estimated.

5. Styling Progress Bar

Property	Values	Description
--ion-progress-bar-color	`#3880ff`	Color of the progress bar
--ion-progress-bar-background	`#e0e0e0`	Background color of the progress bar
--ion-progress-bar-height	`4px`	Height of the progress bar
--ion-progress-bar-border-radius	`0px`	Border radius of the progress bar

Example: Customizing Progress Bar

.custom-progress-bar {
  --ion-progress-bar-color: #ff6b6b;
  --ion-progress-bar-background: #f0f0f0;
  --ion-progress-bar-height: 8px;
  --ion-progress-bar-border-radius: 4px;
}

Example: Using Custom Progress Bar in Ionic

<ion-progress-bar class="custom-progress-bar"></ion-progress-bar>

6. Creating Skeleton Screens

Skeleton screens provide a visual placeholder while content is loading, improving perceived performance and user experience.

Property	Description	Usage
ion-skeleton-text	Creates a skeleton text block with animated shimmer effect.	`<ion-skeleton-text animated></ion-skeleton-text>`
ion-skeleton-page	Wraps content to show skeleton placeholders for entire pages.	`<ion-skeleton-page></ion-skeleton-page>`
animated	Boolean property to enable/disable shimmer animation.	`<ion-skeleton-text animated></ion-skeleton-text>`

Example: Basic Skeleton Screen

<ion-content>
  <ion-skeleton-text animated style="width: 100%"></ion-skeleton-text>
  <ion-skeleton-text animated style="width: 75%"></ion-skeleton-text>
  <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</ion-content>

Example: Skeleton with List Items

<ion-list>
  <ion-item>
    <ion-skeleton-text animated style="width: 100%"></ion-skeleton-text>
  </ion-item>
  <ion-item>
    <ion-skeleton-text animated style="width: 100%"></ion-skeleton-text>
  </ion-item>
</ion-list>

Note: Skeleton screens are best used in conjunction with actual content loading logic to ensure a smooth transition from placeholders to real data.

7. Using Animated Skeleton

Animated skeletons are used to provide a visual placeholder while content is loading, enhancing perceived performance and user experience.

Property	Description	Default Value	Notes
animated	Enables or disables the animation effect	`true`	Set to `false` to disable animation
count	Number of skeleton items to render	`1`	Can be used to simulate multiple items loading
width	Width of the skeleton element	`100%`	Can be set to a fixed value or percentage
height	Height of the skeleton element	`20px`	Adjusts the height of the skeleton block

Example: Basic Animated Skeleton

<ion-skeleton-text animated="true" width="100%" height="20px"></ion-skeleton-text>

Example: Multiple Animated Skeletons

<ion-skeleton-text animated="true" count="3" width="100%" height="20px"></ion-skeleton-text>

8. Styling Skeleton Text

Property	Values	Description
--skeleton-text-background-color	`#e0e0e0`	Background color of the skeleton text
--skeleton-text-highlight-color	`#f0f0f0`	Highlight color for animated skeleton text
--skeleton-text-border-radius	`4px`	Border radius of skeleton text elements

Example: Customizing Skeleton Text Colors

.my-skeleton-text {
  --skeleton-text-background-color: #d0d0d0;
  --skeleton-text-highlight-color: #e8e8e8;
}

Note: The skeleton text component uses CSS variables for easy theming. These can be overridden at any scope to match your app's design language.

9. Creating Skeleton Cards

Example: Basic Skeleton Card

<ion-skeleton-text animated="true"></ion-skeleton-text>

Property	Values	Description
animated	`true` \| `false`	Enables or disables the animation effect. Default is `false`.
width	`string`	Sets the width of the skeleton element. Can be a percentage or pixel value.
height	`string`	Sets the height of the skeleton element. Can be a percentage or pixel value.

Note: The ion-skeleton-text component is ideal for displaying loading states in content that will be replaced with actual data.

Example: Skeleton Card with Image and Text

<ion-card>
  <ion-card-content>
    <ion-skeleton-text animated="true" style="width: 100%; height: 200px;"></ion-skeleton-text>
    <ion-skeleton-text animated="true" style="width: 75%; height: 20px;"></ion-skeleton-text>
    <ion-skeleton-text animated="true" style="width: 50%; height: 20px;"></ion-skeleton-text>
  </ion-card-content>
</ion-card>

10. Implementing Loading States

Example: Basic Loading Overlay

import { LoadingController } from '@ionic/angular';

async function showLoading() {
  const loading = await loadingController.create({
    message: 'Please wait...',
    duration: 2000
  });
  await loading.present();
}

Property	Values	Description
message	`string`	Text to display in the loading overlay
duration	`number`	Time in milliseconds to show the overlay before auto-hiding
spinner	`string`	Spinner type (e.g., 'bubbles', 'circles', 'crescent')
showBackdrop	`boolean`	Whether to show a backdrop behind the loading indicator
cssClass	`string`	Custom CSS class for styling the loading component

Note: The loading overlay blocks user interaction until dismissed.

Example: Loading with Custom Spinner

async function showCustomSpinner() {
  const loading = await loadingController.create({
    message: 'Loading data...',
    spinner: 'crescent',
    showBackdrop: true
  });
  await loading.present();
}