<template>
<AppDoc name="SkeletonDemo" :sources="sources">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Skeleton from 'primevue/skeleton';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"></script>
</code></pre>
<h5>Getting Started</h5>
<p>Skeleton displays a rectangle in its simplest form.</p>
<pre v-code><code>
<Skeleton />
</code></pre>
<h5>Circle</h5>
<p>The other option is the circle by setting <i>shape</i> property as "circle".</p>
<pre v-code><code>
<Skeleton shape="circle"/>
</code></pre>
<h5>Size</h5>
<p>In order to customize the size, use <i>width</i> and <i>height</i> properties for rectangles and <i>size</i> for Circle and Square shapes.</p>
<pre v-code><code>
<Skeleton width="100%" height="2rem" />
<Skeleton shape="circle" size="50px" />
</code></pre>
<h5>Border Radius</h5>
<p>The default border radius of a rectangle is specified by the theme and can be overriden using the <i>borderRadius</i> property.</p>
<pre v-code><code>
<Skeleton borderRadius="16px" />
</code></pre>
<h5>Animation</h5>
<p>Animation can be turned of by setting <i>animation</i> to "none".</p>
<pre v-code><code>
<Skeleton animation="none" />
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>shape</td>
<td>string</td>
<td>rectangle</td>
<td>Shape of the element, options are "rectangle" and "circle".</td>
</tr>
<tr>
<td>size</td>
<td>string</td>
<td>null</td>
<td>Size of the Circle or Square.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>100%</td>
<td>Width of the element.</td>
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>1rem</td>
<td>Height of the element.</td>
</tr>
<tr>
<td>borderRadius</td>
<td>string</td>
<td>null</td>
<td>Border radius of the element, defaults to value from theme.</td>
</tr>
<tr>
<td>animation</td>
<td>string</td>
<td>wave</td>
<td>Type of the animation, valid options are "wave" and "none".</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-skeleton</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-skeleton-circle</td>
<td>Container element of a determinate progressbar.</td>
</tr>
<tr>
<td>p-skeleton-animation-none</td>
<td>Container element of an indeterminate progressbar.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you
may use <i>aria-busy</i> on the container element as well to indicate the loading process.
</p>
<h6>Keyboard Support</h6>
<p>Component does not include any interactive elements.</p>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<div class="card">
<div class="grid formgrid">
<div class="field col-12 md:col-6">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<h5 class="mt-3">Square</h5>
<div class="flex align-items-end">
<Skeleton size="2rem" class="mr-2"></Skeleton>
<Skeleton size="3rem" class="mr-2"></Skeleton>
<Skeleton size="4rem" class="mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="field col-12 md:col-6">
<h5 class="mt-3">Circle</h5>
<div class="flex align-items-end">
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
</div>
</div>
</div>
</div>
<div class="card">
<div class="grid formgrid">
<div class="field col-12 md:col-6 md:pr-6 pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-4">
<div class="flex mb-3">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-center mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
<div class="field col-12 md:col-6">
<h5>List</h5>
<div class="custom-skeleton p-4">
<ul class="m-0 p-0">
<li class="mb-3">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<h5>DataTable</h5>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="name" header="Name">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="category" header="Category">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
</DataTable>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products: new Array(4)
}
}
}
<\\/script>
<style lang="scss" scoped>
.custom-skeleton {
border: 1px solid var(--surface-border);
border-radius: 4px;
ul {
list-style: none;
}
}
</style>`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<div class="card">
<div class="grid formgrid">
<div class="field col-12 md:col-6">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="field col-12 md:col-6">
<h5 class="mt-3">Square</h5>
<div class="flex align-items-end">
<Skeleton size="2rem" class="mr-2"></Skeleton>
<Skeleton size="3rem" class="mr-2"></Skeleton>
<Skeleton size="4rem" class="mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="field col-12 md:col-6">
<h5 class="mt-3">Circle</h5>
<div class="flex align-items-end">
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
</div>
</div>
</div>
</div>
<div class="card">
<div class="grid formgrid">
<div class="field col-12 md:col-6 md:pr-6 pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-4">
<div class="flex mb-3">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-center mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
<div class="field col-12 md:col-6">
<h5>List</h5>
<div class="custom-skeleton p-4">
<ul class="m-0 p-0">
<li class="mb-3">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<h5>DataTable</h5>
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="name" header="Name">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="category" header="Category">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
</DataTable>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const products = ref(new Array(4));
return { products }
}
}
<\\/script>
<style lang="scss" scoped>
.custom-skeleton {
border: 1px solid var(--surface-border);
border-radius: 4px;
ul {
list-style: none;
}
}
</style>`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>`,
content: `<div id="app">
<div class="card">
<div class="grid formgrid">
<div class="field col-12 md:col-6">
<h5>Rectangle</h5>
<p-skeleton class="mb-2"></p-skeleton>
<p-skeleton width="10rem" class="mb-2"></p-skeleton>
<p-skeleton width="5rem" class="mb-2"></p-skeleton>
<p-skeleton height="2rem" class="mb-2"></p-skeleton>
<p-skeleton width="10rem" height="4rem"></p-skeleton>
</div>
<div class="field col-12 md:col-6">
<h5>Rounded</h5>
<p-skeleton class="mb-2" border-radius="16px"></p-skeleton>
<p-skeleton width="10rem" class="mb-2" border-radius="16px"></p-skeleton>
<p-skeleton width="5rem" border-radius="16px" class="mb-2"></p-skeleton>
<p-skeleton height="2rem" class="mb-2" border-radius="16px"></p-skeleton>
<p-skeleton width="10rem" height="4rem" border-radius="16px"></p-skeleton>
</div>
<div class="field col-12 md:col-6">
<h5 class="mt-3">Square</h5>
<div class="flex align-items-end">
<p-skeleton size="2rem" class="mr-2"></p-skeleton>
<p-skeleton size="3rem" class="mr-2"></p-skeleton>
<p-skeleton size="4rem" class="mr-2"></p-skeleton>
<p-skeleton size="5rem"></p-skeleton>
</div>
</div>
<div class="field col-12 md:col-6">
<h5 class="mt-3">Circle</h5>
<div class="flex align-items-end">
<p-skeleton shape="circle" size="2rem" class="mr-2"></p-skeleton>
<p-skeleton shape="circle" size="3rem" class="mr-2"></p-skeleton>
<p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
<p-skeleton shape="circle" size="5rem"></p-skeleton>
</div>
</div>
</div>
</div>
<div class="card">
<div class="grid formgrid">
<div class="field col-12 md:col-6 md:pr-6 pr-0">
<h5>Card</h5>
<div class="custom-skeleton p-4">
<div class="flex mb-3">
<p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
<div>
<p-skeleton width="10rem" class="mb-2"></p-skeleton>
<p-skeleton width="5rem" class="mb-2"></p-skeleton>
<p-skeleton height=".5rem"></p-skeleton>
</div>
</div>
<p-skeleton width="100%" height="150px"></p-skeleton>
<div class="flex justify-content-center mt-3">
<p-skeleton width="4rem" height="2rem"></p-skeleton>
<p-skeleton width="4rem" height="2rem"></p-skeleton>
</div>
</div>
</div>
<div class="field col-12 md:col-6">
<h5>List</h5>
<div class="custom-skeleton p-4">
<ul class="m-0 p-0">
<li class="mb-3">
<div class="flex">
<p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
<li>
<div class="flex">
<p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
<div style="flex: 1">
<p-skeleton width="100%" class="mb-2"></p-skeleton>
<p-skeleton width="75%"></p-skeleton>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<h5>DataTable</h5>
<p-datatable :value="products" responsive-layout="scroll">
<p-column field="code" header="Code">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
<p-column field="name" header="Name">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
<p-column field="category" header="Category">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
<p-column field="quantity" header="Quantity">
<template #body>
<p-skeleton></p-skeleton>
</template>
</p-column>
</p-datatable>
</div>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const products = ref(new Array(4));
return { products }
},
components: {
"p-skeleton": primevue.skeleton,
"p-datatable": primevue.datatable,
"p-column": primevue.column
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
.custom-skeleton {
border: 1px solid var(--surface-border);
border-radius: 4px;
}
.custom-skeleton ul {
list-style: none;
}
</style>`
}
}
};
}
};
</script>