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 |
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 |