Membuat Animasi Skeleton Loading Hanya dengan CSS

Demo Download

Raja Kode - Skeleton Loader adalah CSS library yang memungkinkan kamu untuk membuat animasi skeleton pada saat konten anda di load (seperti text, gambar, kartu)

Supported Skeleton Screens:

• Circle (like avatar)
• HeadLine
• Line
• Square Box
• Divider (hr)
• Card

Cara memasang Skeleton Loading

1. Download dan Upload file CSS-nya di hosting Kamu

<link rel="stylesheet" href="/path/to/dist/index.min.css" />

2. Tambahkan HTML  Skeleton Loading pada halaman web kamu

<!-- Circle -->
<div class="ssc-circle"></div>
<!-- Headline -->
<div class="ssc-head-line"></div>
<!-- Line -->
<div class="ssc-line"></div>
<!-- Divider -->
<div class="ssc-hr"></div>
<!-- Square Box -->
<div class="ssc-square"></div>
<!-- Card class -->
<div class="ssc-card"></div>
<!-- Card With Content -->
<div class="ssc-wrapper">Card with content</div>
<!-- Main parent class -->
<div class="ssc"></div>

3. Membuat Skeleton loading yang kompleks

<div class="ssc ssc-card" style="max-width: 1120px">
  <div class="ssc-wrapper">
    <div class="flex align-start">
      <div class="mr w-70">
        <div class="ssc-square mb" style="height: 200px"></div>
        <div class="ssc-square mb" style="height: 35px"></div>
        <div class="ssc-line"></div>
        <div class="ssc-line w-90"></div>
        <div class="ssc-line w-40"></div>
      </div>
      <div class="w-30">
        <div class="ssc-line mb w-60"></div>
        <div class="ssc-head-line mb"></div>
        <div class="ssc-line mb w-80"></div>
        <div class="ssc-line mb w-40"></div>
        <div class="ssc-line mb w-30"></div>
        <div class="ssc-line mb w-60"></div>
        <div class="ssc-line mb"></div>
        <div class="ssc-line mb w-70"></div>
        <div class="ssc-line mb w-40"></div>
        <div class="ssc-line mb w-30"></div>
      </div>
    </div>
  </div>
</div>

4. Ganti variabel CSS default untuk menyesuaikan Skeleton Loading Screen.

/* Variables */
$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;
$skeleton-loading-animation-time: 1.3s !default;
$skeleton-margin-standart: 16px !default;
$skeleton-wrapper-padding: $skeleton-margin-standart !default;
$skeleton-margin-small: calc($skeleton-margin-standart / 2) !default;
$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;
$skeleton-card-background-color: #ffffff !default;
$skeleton-card-border-radius: 5px !default;
$skeleton-circle-size: 50px !default;
$skeleton-hr-height: 2px !default;
$skeleton-line-border-radius: 15px !default;
$skeleton-line-height: 12px !default;
$skeleton-headline-height: calc($skeleton-line-height * 2) !default;
$skeleton-square-height: 150px !default;

Changelog:

v1.1.0 (09/20/2022)

• Remove line margin bottom – use mb, mbs or custom style rule instead;
• Remove ie11 from browserlist;
• Reduce bundle size;
• Add some flexbox helper classes;