SKELETON SCREEN CSS

Zero dependencies, framework agnostic, a minimalistic set of skeleton screen elements consisting of pure css. Includes scss source, minified and non-minified compiled css files with browser vendor prefixes.

What is it:

A skeleton screen is a visual placeholder that appears before the page content renders completely. It provides a low-fidelity preview of the fully rendered page in order to give the impression of a faster load time. A skeleton screen comprises lightly colored shapes, lines, and text that outline the structure of the page before the final content loads in its place.

See example

How to install:

with npm

1npm i skeleton-screen-css --save

or yarn

1yarn add skeleton-screen-css

or you can download the archive with the project and manually transfer the necessary files to your project folder.

Included files:

• index.scss - source code with default variables;
• index.css - non-minified compiled css with browsers vendor prefixes;
• index.min.css - minified compiled css with browsers vendor prefixes (default with importing via modules);

How to use:

Via browser:

1<link rel="stylesheet" href="index.min.css" />

Via webpack, rollup, parcel or any other bundler:

1import "skeleton-screen-css";
2
3/* or */
4
5require("skeleton-screen-css");

Via import from css/scss

1/* May required path to file or alias if bundler used.
2See the documentation for the bundler */
3
4@import "skeleton-screen-css";

How to override default variables

1/* Override default variable */
2$skeleton-element-color: #cecece;
3
4/* Then import scss source file */
5@import "skeleton-screen-css/dist/index.scss";

Variables

1$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;
2
3$skeleton-loading-animation-time: 1.3s !default;
4
5$skeleton-margin-standart: 16px !default;
6
7$skeleton-wrapper-padding: $skeleton-margin-standart !default;
8
9$skeleton-margin-small: calc($skeleton-margin-standart / 2) !default;
10
11$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;
12$skeleton-card-background-color: #ffffff !default;
13$skeleton-card-border-radius: 5px !default;
14
15$skeleton-circle-size: 50px !default;
16
17$skeleton-hr-height: 2px !default;
18
19$skeleton-line-border-radius: 15px !default;
20$skeleton-line-height: 12px !default;
21
22$skeleton-headline-height: calc($skeleton-line-height * 2) !default;
23
24$skeleton-square-height: 150px !default;

Basic elements

1<!-- Elements classes -->
2<div class="ssc-circle"></div>
3
4<div class="ssc-head-line"></div>
5
6<div class="ssc-line"></div>
7
8<div class="ssc-square"></div>
9
10<div class="ssc-hr"></div>
11
12<!-- Card class -->
13<div class="ssc-card"></div>
14
15<!-- Wrapper class for padding -->
16<div class="ssc-wrapper">Card with content</div>
17
18<!-- Main parent class -->
19<div class="ssc"></div>

Helpers

1/** Helpers classes */
2.ssc {
3    .mb {
4        margin-bottom: $skeleton-margin-standart;
5    }
6
7    .mt {
8        margin-top: $skeleton-margin-standart;
9    }
10
11    .mr {
12        margin-right: $skeleton-margin-standart;
13    }
14
15    .ml {
16        margin-left: $skeleton-margin-standart;
17    }
18
19    .mbs {
20        margin-bottom: $skeleton-margin-small;
21    }
22
23    .mts {
24        margin-top: $skeleton-margin-small;
25    }
26
27    .mrs {
28        margin-right: $skeleton-margin-small;
29    }
30
31    .mls {
32        margin-left: $skeleton-margin-small;
33    }
34
35    .w-10 {
36        width: 10%;
37    }
38
39    .w-20 {
40        width: 20%;
41    }
42
43    .w-30 {
44        width: 30%;
45    }
46
47    .w-40 {
48        width: 40%;
49    }
50
51    .w-50 {
52        width: 50%;
53    }
54
55    .w-60 {
56        width: 60%;
57    }
58
59    .w-70 {
60        width: 70%;
61    }
62
63    .w-80 {
64        width: 80%;
65    }
66
67    .w-90 {
68        width: 90%;
69    }
70
71    .w-100 {
72        width: 100%;
73    }
74
75    .flex {
76        display: flex;
77    }
78
79    .inline-flex {
80        display: inline-flex;
81    }
82
83    .flex-column {
84        flex-direction: column;
85    }
86
87    .flex-column-reverse {
88        flex-direction: column-reverse;
89    }
90
91    .flex-row {
92        flex-direction: row;
93    }
94
95    .flex-row-reverse {
96        flex-direction: row-reverse;
97    }
98
99    .align-center {
100        align-items: center;
101    }
102
103    .align-start {
104        align-items: flex-start;
105    }
106
107    .align-end {
108        align-items: flex-end;
109    }
110
111    .align-stretch {
112        align-items: stretch;
113    }
114
115    .justify-start {
116        justify-content: start;
117    }
118
119    .justify-center {
120        justify-content: center;
121    }
122
123    .justify-end {
124        justify-content: end;
125    }
126
127    .justify-between {
128        justify-content: space-between;
129    }
130
131    .justify-around {
132        justify-content: space-around;
133    }
134}

Example - card

1<div class="ssc ssc-card" style="max-width: 300px">
2    <div class="ssc-wrapper">
3        <div class="ssc-square mb"></div>
4        <div class="flex align-center justify-between">
5            <div class="w-40">
6                <div class="ssc-line w-70 mbs"></div>
7                <div class="ssc-line w-100 mbs"></div>
8            </div>
9            <div class="ssc-head-line w-50"></div>
10        </div>
11    </div>
12    <div class="ssc-hr"></div>
13    <div class="ssc-wrapper">
14        <div class="ssc-line w-90 mbs"></div>
15        <div class="ssc-line w-30 mbs"></div>
16        <div class="ssc-line w-70 mbs"></div>
17        <div class="ssc-line w-50 mbs"></div>
18    </div>
19    <div class="ssc-hr"></div>
20    <div class="ssc-wrapper">
21        <div class="ssc-head-line"></div>
22    </div>
23</div>

See more live examples