Skeleton is a placeholder to display instead of the actual content.
| Code | Name | Category | Quantity |
|---|---|---|---|
<style>
.custom-skeleton {
border: 1px solid var(--p-content-border-color);
border-radius: 4px;
}
.custom-skeleton>ul {
list-style: none;
}
</style>
<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 width="10rem" class="mb-2"/>
<p:skeleton width="5rem" class="mb-2"/>
<p:skeleton height="2rem" class="mb-2"/>
<p:skeleton width="10rem" height="4rem"/>
</div>
<div class="field col-12 md:col-6">
<h5>Rounded</h5>
<p:skeleton class="mb-2" borderRadius="16px"/>
<p:skeleton width="10rem" class="mb-2" borderRadius="16px"/>
<p:skeleton width="5rem" borderRadius="16px" class="mb-2"/>
<p:skeleton height="2rem" class="mb-2" borderRadius="16px"/>
<p:skeleton width="10rem" height="4rem" borderRadius="16px"/>
</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 size="3rem" class="mr-2"/>
<p:skeleton size="4rem" class="mr-2"/>
<p:skeleton size="5rem"/>
</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 shape="circle" size="3rem" class="mr-2"/>
<p:skeleton shape="circle" size="4rem" class="mr-2"/>
<p:skeleton shape="circle" size="5rem"/>
</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"/>
<div>
<p:skeleton width="10rem" class="mb-2"/>
<p:skeleton width="5rem" class="mb-2"/>
<p:skeleton height=".5rem"/>
</div>
</div>
<p:skeleton width="100%" height="150px"/>
<div class="flex justify-content-between mt-3">
<p:skeleton width="4rem" height="2rem"/>
<p:skeleton width="4rem" height="2rem"/>
</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"/>
<div style="flex: 1">
<p:skeleton width="100%" class="mb-2"/>
<p:skeleton width="75%"/>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<p:skeleton shape="circle" size="4rem" class="mr-2"/>
<div style="flex: 1">
<p:skeleton width="100%" class="mb-2"/>
<p:skeleton width="75%"/>
</div>
</div>
</li>
<li class="mb-3">
<div class="flex">
<p:skeleton shape="circle" size="4rem" class="mr-2"/>
<div style="flex: 1">
<p:skeleton width="100%" class="mb-2"/>
<p:skeleton width="75%"/>
</div>
</div>
</li>
<li>
<div class="flex">
<p:skeleton shape="circle" size="4rem" class="mr-2"/>
<div style="flex: 1">
<p:skeleton width="100%" class="mb-2"/>
<p:skeleton width="75%"/>
</div>
</div>
</li>
</ul>
</div>
</div>
<h5>DataTable</h5>
<p:dataTable var="product" value="#{skeletonView.products}">
<p:column headerText="Code">
<p:skeleton/>
</p:column>
<p:column headerText="Name">
<p:skeleton/>
</p:column>
<p:column headerText="Category">
<p:skeleton/>
</p:column>
<p:column headerText="Quantity">
<p:skeleton/>
</p:column>
</p:dataTable>
</div>
</div>
<div class="card" style="min-height: 150px">
<p:outputPanel deferred="true" deferredMode="visible">
<p:ajax event="load" listener="#{outputPanelView.loadData}"/>
<f:facet name="loading">
<p:skeleton width="200px" height="21px" class="mb-4"/>
<p:skeleton width="100%" height="42px"/>
</f:facet>
<h5>#{outputPanelView.data.title}</h5>
<p>#{outputPanelView.data.body}</p>
</p:outputPanel>
</div>