Installations

npm install placeholder-loading

Pull Requests

Open

0

Total

34

Closed

19

Merged

15

Issues

Open

4

Total

12

Closed

8

Releases

3

0.6.0

Published on 24 Jun 2022

0.5.0

Published on 09 Aug 2021

0.4.0

Published on 03 Apr 2021

View all 3 releases

Developer

zalog

Developer Guide

BETA

Module System

Unable to determine the module system for this package.

Min. Node Version

Typescript Support

No

Node Version

16.15.0

NPM Version

8.5.5 Statistics

1,481 Stars

167 Commits

149 Forks

25 Watching

3 Branches

4 Contributors

Updated on 08 Nov 2024

Languages

HTML (66.16%)

SCSS (17.5%)

JavaScript (16.35%)

Total Downloads

Cumulative downloads

Total Downloads

2,025,534

Last day

5.3%

1,820

Compared to previous day

Last week

4.8%

9,118

Compared to previous week

Last month

5%

38,439

Compared to previous month

Last year

-0.4%

522,478

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

16

autoprefixer browser-sync cssnano del gulp gulp-header gulp-postcss gulp-rename gulp-sass postcss sass stylelint stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-scss

Versions

Placeholder loading

Simple and flexible, css only, content placeholder loading animation.

Demo

https://zalog.github.io/placeholder-loading/

Take a look at this examples, but keep in mind that it's flexible enough to play with elements as you need.

You can change the order, add avatar or image, change text bar sizes, etc.

Installing

Via npm

npm install placeholder-loading --save
@import "~/node_modules/placeholder-loading/src/scss/placeholder-loading"; - please modify the path accordingly
change sass variables if you need so:

1$ph-direction:            ltr !default;
2$ph-bg:                   #fff !default;
3$ph-color:                #ced4da !default;
4$ph-border:               1px solid darken($ph-bg, 10%) !default;
5$ph-border-radius:        2px !default;
6
7$ph-cols:                 12 !default;
8$ph-cols-remove-odd:      true !default;
9$ph-gutter:               30px !default;
10$ph-spacer:               15px !default;
11
12$ph-avatar-border-radius: 50% !default;
13
14$ph-animation-duration:   0.8s !default;

Via bower

Just replace npm with bower: bower install placeholder-loading --save

Via cdn

1<head>
2    <link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
3</head>

Usage

A simple html markup would be something like this:

1<div class="ph-item">
2    <div class="ph-col-12">
3        <div class="ph-picture"></div>
4        <div class="ph-row">
5            <div class="ph-col-6 big"></div>
6            <div class="ph-col-4 empty big"></div>
7            <div class="ph-col-2 big"></div>
8            <div class="ph-col-4"></div>
9            <div class="ph-col-8 empty"></div>
10            <div class="ph-col-6"></div>
11            <div class="ph-col-6 empty"></div>
12            <div class="ph-col-12"></div>
13        </div>
14    </div>
15</div>

grid classes: .ph-col-2, .ph-col-4, .ph-col-6, .ph-col-8, .ph-col-10, .ph-col-12
elements inside: .ph-avatar and .ph-picture
use .big for bigger text line

Built With

Contributing

Please read Angular's CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Catalin Zalog - Initial work - zalog.ro

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More