Animated Skeleton Loading Screens In Pure CSS

Category: CSS & CSS3 , Loading , Recommended | September 3, 2020
Author: nullilac
Views Total: 852 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;

You Might Be Interested In:


Leave a Reply