Animated Skeleton Loading Screens In Pure CSS


Author: nullilac
Views Total: 8,475 views
Official Page: Go to website
Last Update: September 3, 2020
License: MIT

Preview:

Animated Skeleton Loading Screens In Pure CSS

Description:

A CSS skeleton loader library that creates an animated skeleton preview of your block content (e.g. text, cards, images) when the data is loading.

Supported Skeleton Screens:

  • Circle (like avatar)
  • HeadLine
  • Line
  • Square Box
  • Divider (hr)
  • Card
  • Any combination of the above screens.

How to use it:

1. Install the package with NPM.

# NPM
$ npm i skeleton-screen-css –save

2. Import the skeleton-screen-css.

@import "skeleton-screen-css";
// or
<link rel="stylesheet" href="/path/to/dist/index.min.css" />

3. Add Skeleton Loading Screens to the page.

<!-- 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>

4. Create a complex Skeleton Loading Screen.

<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>

5. Override the default CSS variables to customize the Skeleton Loading Screen.

$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;
$skeleton-loading-animation-time: 1.3s !default;
$skeleton-margin-standart: 16px !default;
$skeleton-margin-small: $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-line-margin-bottom: 8px !default;
$skeleton-headline-height: $skeleton-line-height * 2 !default;
$skeleton-square-height: 150px !default;
See also  macOS Mojave Style Checkbox & Radio Button In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *