ion-skeleton-text
Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- Data to display after skeleton screen -->
<div *ngIf="data">
<div class="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula.
Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
</div>
<ion-list>
<ion-list-header>
<ion-label> Data </ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg" />
</ion-avatar>
<ion-label>
<h3>{{ data.heading }}</h3>
<p>{{ data.para1 }}</p>
<p>{{ data.para2 }}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="./thumbnail.svg" />
</ion-thumbnail>
<ion-label>
<h3>{{ data.heading }}</h3>
<p>{{ data.para1 }}</p>
<p>{{ data.para2 }}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="call" slot="start"></ion-icon>
<ion-label>
<h3>{{ data.heading }}</h3>
<p>{{ data.para1 }}</p>
<p>{{ data.para2 }}</p>
</ion-label>
</ion-item>
</ion-list>
</div>
<!-- Skeleton screen -->
<div *ngIf="!data">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
import { Component } from '@angular/core';
@Component({
selector: 'skeleton-text-example',
templateUrl: 'skeleton-text-example.html',
styleUrls: ['./skeleton-text-example.css'],
})
export class SkeletonTextExample {
data: any;
constructor() {}
ionViewWillEnter() {
setTimeout(() => {
this.data = {
heading: 'Normal text',
para1: 'Lorem ipsum dolor sit amet, consectetur',
para2: 'adipiscing elit.',
};
}, 5000);
}
}
<!-- Data to display after skeleton screen -->
<div id="data">
<div class="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula.
Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
</div>
<ion-list>
<ion-list-header>
<ion-label> Data </ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg" />
</ion-avatar>
<ion-label>
<h3>Normal text</h3>
<p>Lorem ipsum dolor sit amet, consectetur</p>
<p>adipiscing elit.</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="./thumbnail.svg" />
</ion-thumbnail>
<ion-label>
<h3>Normal text</h3>
<p>Lorem ipsum dolor sit amet, consectetur</p>
<p>adipiscing elit.</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="call" slot="start"></ion-icon>
<ion-label>
<h3>Normal text</h3>
<p>Lorem ipsum dolor sit amet, consectetur</p>
<p>adipiscing elit.</p>
</ion-label>
</ion-item>
</ion-list>
</div>
<!-- Skeleton screen -->
<div id="skeleton">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
#data {
display: none;
}
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
function onLoad() {
const skeletonEl = document.getElementById('skeleton');
const dataEl = document.getElementById('data');
setTimeout(() => {
skeletonEl.style.display = 'none';
dataEl.style.display = 'block';
}, 5000);
}
import React, { useState } from 'react';
import {
IonContent,
IonItem,
IonAvatar,
IonLabel,
IonSkeletonText,
IonListHeader,
IonIcon,
IonThumbnail,
IonList,
} from '@ionic/react';
import { call } from 'ionicons/icons';
import './SkeletonTextExample.css';
export const SkeletonTextExample: React.FC = () => {
const [data, setData] = useState();
setTimeout(() => {
setData({
heading: 'Normal text',
para1: 'Lorem ipsum dolor sit amet, consectetur',
para2: 'adipiscing elit.',
});
}, 5000);
return (
<IonContent>
{data ? (
<>
<div className="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non
vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
</div>
<IonList>
<IonListHeader>
<IonLabel>Data</IonLabel>
</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<img src="./avatar.svg" />
</IonAvatar>
<IonLabel>
<h3>{data.heading}</h3>
<p>{data.para1}</p>
<p>{data.para2}</p>
</IonLabel>
</IonItem>
<IonItem>
<IonThumbnail slot="start">
<img src="./thumbnail.svg" />
</IonThumbnail>
<IonLabel>
<h3>{data.heading}</h3>
<p>{data.para1}</p>
<p>{data.para2}</p>
</IonLabel>
</IonItem>
<IonItem>
<IonIcon icon={call} slot="start" />
<IonLabel>
<h3>{data.heading}</h3>
<p>{data.para1}</p>
<p>{data.para2}</p>
</IonLabel>
</IonItem>
</IonList>
</>
) : (
<>
<div className="ion-padding custom-skeleton">
<IonSkeletonText animated style={{ width: '60%' }} />
<IonSkeletonText animated />
<IonSkeletonText animated style={{ width: '88%' }} />
<IonSkeletonText animated style={{ width: '70%' }} />
<IonSkeletonText animated style={{ width: '60%' }} />
</div>
<IonList>
<IonListHeader>
<IonLabel>
<IonSkeletonText animated style={{ width: '20%' }} />
</IonLabel>
</IonListHeader>
<IonItem>
<IonAvatar slot="start">
<IonSkeletonText animated />
</IonAvatar>
<IonLabel>
<h3>
<IonSkeletonText animated style={{ width: '50%' }} />
</h3>
<p>
<IonSkeletonText animated style={{ width: '80%' }} />
</p>
<p>
<IonSkeletonText animated style={{ width: '60%' }} />
</p>
</IonLabel>
</IonItem>
<IonItem>
<IonThumbnail slot="start">
<IonSkeletonText animated />
</IonThumbnail>
<IonLabel>
<h3>
<IonSkeletonText animated style={{ width: '50%' }} />
</h3>
<p>
<IonSkeletonText animated style={{ width: '80%' }} />
</p>
<p>
<IonSkeletonText animated style={{ width: '60%' }} />
</p>
</IonLabel>
</IonItem>
<IonItem>
<IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot="start" />
<IonLabel>
<h3>
<IonSkeletonText animated style={{ width: '50%' }} />
</h3>
<p>
<IonSkeletonText animated style={{ width: '80%' }} />
</p>
<p>
<IonSkeletonText animated style={{ width: '60%' }} />
</p>
</IonLabel>
</IonItem>
</IonList>
</>
)}
</IonContent>
);
};
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'skeleton-text-example',
styleUrl: 'skeleton-text-example.css',
})
export class SkeletonTextExample {
@State() data: any;
componentWillLoad() {
// Data will show after 5 seconds
setTimeout(() => {
this.data = {
heading: 'Normal text',
para1: 'Lorem ipsum dolor sit amet, consectetur',
para2: 'adipiscing elit.',
};
}, 5000);
}
// Render skeleton screen when there is no data
renderSkeletonScreen() {
return [
<ion-content>
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style={{ width: '60%' }}></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style={{ width: '88%' }}></ion-skeleton-text>
<ion-skeleton-text animated style={{ width: '70%' }}></ion-skeleton-text>
<ion-skeleton-text animated style={{ width: '60%' }}></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style={{ width: '20%' }}></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style={{ width: '50%' }}></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style={{ width: '80%' }}></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style={{ width: '60%' }}></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style={{ width: '50%' }}></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style={{ width: '80%' }}></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style={{ width: '60%' }}></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style={{ width: '27p', height: '27px' }} slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style={{ width: '50%' }}></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style={{ width: '80%' }}></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style={{ width: '60%' }}></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>,
];
}
// Render the elements with data
renderDataScreen() {
return [
<ion-content>
<div class="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non
vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
</div>
<ion-list>
<ion-list-header>
<ion-label>Data</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg" />
</ion-avatar>
<ion-label>
<h3>{this.data.heading}</h3>
<p>{this.data.para1}</p>
<p>{this.data.para2}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="./thumbnail.svg" />
</ion-thumbnail>
<ion-label>
<h3>{this.data.heading}</h3>
<p>{this.data.para1}</p>
<p>{this.data.para2}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon name="call" slot="start"></ion-icon>
<ion-label>
<h3>{this.data.heading}</h3>
<p>{this.data.para1}</p>
<p>{this.data.para2}</p>
</ion-label>
</ion-item>
</ion-list>
</ion-content>,
];
}
render() {
if (this.data) {
return this.renderDataScreen();
} else {
return this.renderSkeletonScreen();
}
}
}
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
<template>
<!-- Data to display after skeleton screen -->
<div v-if="data">
<div class="ion-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non
vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
</div>
<ion-list>
<ion-list-header>
<ion-label> Data </ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<img src="./avatar.svg" />
</ion-avatar>
<ion-label>
<h3>{{ data.heading }}</h3>
<p>{{ data.para1 }}</p>
<p>{{ data.para2 }}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<img src="./thumbnail.svg" />
</ion-thumbnail>
<ion-label>
<h3>{{ data.heading }}</h3>
<p>{{ data.para1 }}</p>
<p>{{ data.para2 }}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-icon :icon="call" slot="start"></ion-icon>
<ion-label>
<h3>{{ data.heading }}</h3>
<p>{{ data.para1 }}</p>
<p>{{ data.para2 }}</p>
</ion-label>
</ion-item>
</ion-list>
</div>
<!-- Skeleton screen -->
<div v-if="!data">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</template>
<style>
/* Custom Skeleton Line Height and Margin */
.custom-skeleton ion-skeleton-text {
line-height: 13px;
}
.custom-skeleton ion-skeleton-text:last-child {
margin-bottom: 5px;
}
</style>
<script>
import {
IonAvatar,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSkeletonText,
IonThumbnail,
} from '@ionic/vue';
import { call } from 'ionicons/icons';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {
IonAvatar,
IonIcon,
IonItem,
IonLabel,
IonList,
IonListHeader,
IonSkeletonText,
IonThumbnail,
},
setup() {
const data = ref();
setTimeout(() => {
data.value = {
heading: 'Normal text',
para1: 'Lorem ipsum dolor sit amet, consectetur',
para2: 'adipiscing elit.',
};
}, 5000);
return { data };
},
});
</script>
Properties
animated
Description | If true , the skeleton text will animate. |
Attribute | animated |
Type | boolean |
Default | false |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the skeleton text |
--background-rgb | Background of the skeleton text in rgb format |
--border-radius | Border radius of the skeleton text |
Slots
No slots available for this component.