diff --git a/demo/all.html b/demo/all.html index e9b65cd0d..37aa88f33 100644 --- a/demo/all.html +++ b/demo/all.html @@ -1,7 +1,7 @@ + + + + + + Skeleton - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + Tabler + +
+
+ + + + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
+
+
+
+
+ + +
+
Paweł Kuna
+
UI Designer
+
+ +
+ Set status + Profile & account + Feedback +
+ Settings + Logout +
+
+
+
+
+
+ +
+
+
+ +
+
+
+

+ Documentation +

+
+
+
+
+
+
+ + + Browse source code + +
On this page
+ +
+
+
+
+
+
+
+

Skeleton

+
+

Skeleton is used to reserve space for content that soon will appear in a layout.

+

Skeleton line

+

Skeleton lines can contain have lines of text. Their length is different and depends on the text-align property.

+
+
+
+
+
+
+
+
+
+
+ 
<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+
+
+

However, it may be useful, however, to specify the full width in order to fit the content more effectively.

+
+
+
+
+
+
+
+
+
+
+ 
<div class="skeleton-line skeleton-line-full"></div>
+<div class="skeleton-line skeleton-line-full"></div>
+<div class="skeleton-line skeleton-line-full"></div>
+<div class="skeleton-line skeleton-line-full"></div>
+
+
+

You can also move the lines to right or to center:

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
<div class="text-right">
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+</div>
+<div class="text-center mt">
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+  <div class="skeleton-line"></div>
+</div>
+
+
+

Skeleton heading

+

A skeleton can contain also a header element looks like header:

+
+
+
+
+
+
+
+
+
+ 
<div class="skeleton-heading"></div>
+<div class="skeleton-line"></div>
+<div class="skeleton-line"></div>
+
+
+

Skeleton avatar

+

You can make your skeleton item look like an avatar.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
<div class="row">
+  <div class="col-auto">
+    <div class="skeleton-avatar"></div>
+  </div>
+  <div class="col">
+    <div class="skeleton-line"></div>
+    <div class="skeleton-line"></div>
+  </div>
+</div>
+
+
+

The size of avatars is exactly the same as a regular avatar.

+
+
+
+
+
+
+
+
+
+
+
+
+ 
<div class="skeleton-avatar skeleton-avatar-xl"></div>
+<div class="skeleton-avatar skeleton-avatar-lg"></div>
+<div class="skeleton-avatar skeleton-avatar-md"></div>
+<div class="skeleton-avatar"></div>
+<div class="skeleton-avatar skeleton-avatar-sm"></div>
+<div class="skeleton-avatar skeleton-avatar-xs"></div>
+
+
+

Skeleton image

+

You can use a skeleton, which will look like a picture. You can easily change its height and width. Standard image ratio is 16:9.

+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
<div class="skeleton-image"></div>
+<div class="skeleton-image" style="width: 80px; height: 200px;"></div>
+<div class="skeleton-image" style="width: 80px; height: 80px;"></div>
+
+
+

You can also use the ratio component, and get the image in the right proportions.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
<div class="ratio ratio-1x1">
+  <div class="skeleton-image"></div>
+</div>
+<div class="ratio ratio-4x3">
+  <div class="skeleton-image"></div>
+</div>
+<div class="ratio ratio-16x9">
+  <div class="skeleton-image"></div>
+</div>
+<div class="ratio ratio-21x9">
+  <div class="skeleton-image"></div>
+</div>
+
+
+

Live examples

+

See in the following examples how else you can use the skeleton component

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
+
+
+
+
+
+
+
+ 
<div class="card">
+  <div class="ratio ratio-21x9 card-img-top">
+    <div class="skeleton-image"></div>
+  </div>
+  <div class="card-body">
+    <div class="skeleton-heading"></div>
+    <div class="skeleton-line"></div>
+    <div class="skeleton-line"></div>
+  </div>
+</div>
+<div class="card">
+  <div class="row g-0 align-items-center">
+    <div class="col-3">
+      <div class="ratio ratio-1x1 card-img-left">
+        <div class="skeleton-image"></div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="card-body">
+        <div class="skeleton-heading"></div>
+        <div class="skeleton-line"></div>
+        <div class="skeleton-line"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="card-body">
+    <div class="row">
+      <div class="col-auto">
+        <div class="skeleton-avatar"></div>
+      </div>
+      <div class="col">
+        <div class="skeleton-line"></div>
+        <div class="skeleton-line"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <div class="card-body py-5 text-center">
+    <div>
+      <div class="skeleton-avatar skeleton-avatar-lg"></div>
+    </div>
+    <div class="mt w-75 mx-auto">
+      <div class="skeleton-heading"></div>
+      <div class="skeleton-line"></div>
+    </div>
+  </div>
+</div>
+<div class="card">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="skeleton-avatar"></div>
+        </div>
+        <div class="col-7">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+        <div class="col-2 ml-auto text-right">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+      </div>
+    </li>
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="skeleton-avatar"></div>
+        </div>
+        <div class="col-7">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+        <div class="col-2 ml-auto text-right">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+      </div>
+    </li>
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="skeleton-avatar"></div>
+        </div>
+        <div class="col-7">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+        <div class="col-2 ml-auto text-right">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+      </div>
+    </li>
+    <li class="list-group-item">
+      <div class="row align-items-center">
+        <div class="col-auto">
+          <div class="skeleton-avatar"></div>
+        </div>
+        <div class="col-7">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+        <div class="col-2 ml-auto text-right">
+          <div class="skeleton-line"></div>
+          <div class="skeleton-line"></div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+
+
+
+
+
+
+
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/demo/docs/spinners.html b/demo/docs/spinners.html index b16c7a7c9..12f96c848 100644 --- a/demo/docs/spinners.html +++ b/demo/docs/spinners.html @@ -1,7 +1,7 @@ + + + + + + Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + + + + + + + + + + + + +
+
+
+ + + Tabler + +
+
+ + + + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
+
+
+
+
+ + +
+
Paweł Kuna
+
UI Designer
+
+ +
+ Set status + Profile & account + Feedback +
+ Settings + Logout +
+
+
+
+
+
+ +
+
+
+ +
+
+
+

+ Skeleton +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    • +
+
+
+
+
+
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/demo/snippets.html b/demo/snippets.html index baaa32514..da0c8a78d 100644 --- a/demo/snippets.html +++ b/demo/snippets.html @@ -1,7 +1,7 @@