Go one step further with our solutions for creating an intuitive, personalized experience.
The skeleton components allow to improve the analysis of the interface from the very beginning.
Start by creating an element with the h_skeleton class. This element will have all the skeleton components.
<div class="h_skeleton"></div>
There are 3 types of skeleton components:
Lines with the class line_[X] (X corresponds to the height in rem).
Squares square_[X] and circles circle_[X] ([X] is the percentage of the length of the parent element, e.g. if X is 5, then the component will take 5% of the length).
<div class="h_skeleton">
<div class="line_1"></div>
<div class="line_4"></div>
<div class="square_20"></div>
<div class="square_40"></div>
<div class="circle_10"></div>
<div class="circle_35"></div>
</div>
<div class="h_skeleton">
<div class="line_1"></div>
<div class="line_4"></div>
<div class="square_20"></div>
<div class="square_40"></div>
<div class="circle_10"></div>
<div class="circle_35"></div>
</div>
| Class | Definition |
|---|---|
| h_skeleton | Create a component. |
| line_[X] | height : [X]rem. |
| square_[X] | width : [X * 5]%; height : [X * 5]%. |
| circle_[X] | width : [X * 5]%; height : [X * 5]%. |
| Methods | Definition |
|---|---|
| skeleton.hide(classNameElement) | Hide all skeleton components with the "display:none" style with skeleton.hide(). Hides only the targeted element if "classNameElement" is set (e.g. skeleton.display("my-element")). |
| skeleton.display(classNameElement) | Displays all hidden skeleton components with skeleton.display(). Displays only the targeted element if "classNameElement" is filled in (e.g. skeleton.display("my-element")).. |
| skeleton.destroy(classNameElement) | Permanently destroys all skeleton components with skeleton.destroy(). Destroy only the targeted element if "classNameElement" is specified (e.g. skeleton.destroy("my-element")).. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings