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

Catalin Zalog

Last update: Dec 30, 2022

Overview

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:

$ph-direction:            ltr !default;
$ph-bg:                   #fff !default;
$ph-color:                #ced4da !default;
$ph-border:               1px solid darken($ph-bg, 10%) !default;
$ph-border-radius:        2px !default;

$ph-cols:                 12 !default;
$ph-cols-remove-odd:      true !default;
$ph-gutter:               30px !default;
$ph-spacer:               15px !default;

$ph-avatar-border-radius: 50% !default;

$ph-animation-duration:   0.8s !default;

Via bower

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

Via cdn

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

Usage

A simple html markup would be something like this:

<div class="ph-item">
    <div class="ph-col-12">
        <div class="ph-picture">div>
        <div class="ph-row">
            <div class="ph-col-6 big">div>
            <div class="ph-col-4 empty big">div>
            <div class="ph-col-2 big">div>
            <div class="ph-col-4">div>
            <div class="ph-col-8 empty">div>
            <div class="ph-col-6">div>
            <div class="ph-col-6 empty">div>
            <div class="ph-col-12">div>
        div>
    div>
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

Comments

feat: adds no wrap demo, refactors Y margins
updates demo index.html with a no wrap and no animation placeholder variation

refactos Y margin's that works for both variations, the no wrapper and wrapped one

extracts $ph-border var

updates readme

gives the loading animation in ::before pointer-events: none so it is not annoying when trying to debug with the inspector

LE:

~~Added .clean class to wrapper to have no background, border, margin and padding~~ replaced by first line in the description

~~The last .ph-row should not have margin-bottom~~ replaced by second line

~~Added uneven cols to have more flexibility~~ we'll add this in a new PR

Fixes #20
opened by MickL 20
Sass Deprecation Warning

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommend to run the migration command and commit. I can do the PR if you like.

Thanks!

opened by bay-jacewhitten 5
No animation without .ph-item
I would like to place just the elements (image placeholder, text placeholder) without the frame created by .ph-item. But if I do so no animation is running.

My suggestion would be:

Let everything work without the wrapper .ph-item, OR

Create a second class .ph-item-no-border or an additonal class .clean that removes border, margin and padding

I would prefer the first option so it is easy to place an image-placeholder for example without the need of a wrapper ph-item. On the other hand having a wrapper would allow for having centered content as described in #21

In addition the values of .ph-item (border, padding, margin) should be configurable through variables imo.
opened by MickL 4
Can't seem to change any of the variables.
Using Angular 9.

Followed the steps:

npm install...

import the node module

Add the variables in styles.scss

Tries to change the variable values, #fff to #123

Background did not change from white.

Any idea on what I did wrong? Thanks!
opened by blu3beri 3
added variable to modify animation duration.

Hey great work with this library, the best one I found to be able to create placeholders.

I just wanted to suggest a small change to be able to modify the animation duration. I added a new variable ph-animation-duration.

Thanks again for the library!

Jorge.
enhancement

opened by jfplataroti 3
build(deps): bump follow-redirects from 1.14.1 to 1.14.8
Bumps follow-redirects from 1.14.1 to 1.14.8.

Commits

3d81dc3 Release version 1.14.8 of the npm package.

62e546a Drop confidential headers across schemes.

2ede36d Release version 1.14.7 of the npm package.

8b347cb Drop Cookie header across domains.

6f5029a Release version 1.14.6 of the npm package.

af706be Ignore null headers.

d01ab7a Release version 1.14.5 of the npm package.

40052ea Make compatible with Node 17.

86f7572 Fix: clear internal timer on request abort to avoid leakage

2e1eaf0 Keep Authorization header on subdomain redirects.

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump nanoid from 3.1.23 to 3.2.0
Bumps nanoid from 3.1.23 to 3.2.0.

Changelog

Sourced from nanoid's changelog.

Change Log

This project adheres to Semantic Versioning.

3.2

Added --size and --alphabet arguments to binary (by Vitaly Baev).

3.1.32

Reduced async exports size (by Artyom Arutyunyan).

Moved from Jest to uvu (by Vitaly Baev).

3.1.31

Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

3.1.30

Reduced size for project with brotli compression (by Anton Khlynovskiy).

3.1.29

Reduced npm package size.

3.1.28

Reduced npm package size.

3.1.27

Cleaned dependencies from development tools.

3.1.26

Improved performance (by Eitan Har-Shoshanim).

Reduced npm package size.

3.1.25

Fixed browserify support.

3.1.24

Fixed browserify support (by Artur Paikin).

Commits

23b1369 Release 3.2 version

967788e Remove TS test tools

27eaa90 Simplify new binary tool

a9d9123 Update dependencies

32b9bda Allows passing size or custom alphabet via cli as args (#334)

246d5f8 Update vite

afdf9c9 doc: Fixed Typo (#335)

90a446f Update benchmark results

8ba2319 bench: add @napi-rs/uuid v4 (#333)

f425778 Release 3.1.32 version

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump follow-redirects from 1.14.1 to 1.14.7
Bumps follow-redirects from 1.14.1 to 1.14.7.

Commits

2ede36d Release version 1.14.7 of the npm package.

8b347cb Drop Cookie header across domains.

6f5029a Release version 1.14.6 of the npm package.

af706be Ignore null headers.

d01ab7a Release version 1.14.5 of the npm package.

40052ea Make compatible with Node 17.

86f7572 Fix: clear internal timer on request abort to avoid leakage

2e1eaf0 Keep Authorization header on subdomain redirects.

2ad9e82 Carry over Host header on relative redirects (#172)

77e2a58 Release version 1.14.4 of the npm package.

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump nth-check from 2.0.0 to 2.0.1
Bumps nth-check from 2.0.0 to 2.0.1.

Release notes

Sourced from nth-check's releases.

v2.0.1

Fixes:

Replace regex with hand-rolled parser for nth-expressions (#9) 9894c1d

Ensures parsing will always have linear time complexity.

Internal:

chore(ci): Use GitHub Actions, Dependabot (#10) e02b4dd

Bump dependencies

https://github.com/fb55/nth-check/compare/v2.0.0...v2.0.1

Commits

65e40b0 2.0.1

ff63f1d Bump eslint-config-prettier from 6.15.0 to 8.3.0 (#11)

ff24c93 Bump jest from 26.6.3 to 27.2.0 (#17)

da9d78a Bump @typescript-eslint/parser from 4.9.0 to 4.31.1 (#18)

fa35caf Bump @types/node from 14.14.10 to 16.9.1 (#16)

5f39402 Bump @typescript-eslint/eslint-plugin from 4.9.0 to 4.31.1 (#19)

a11c0c1 Bump prettier from 2.2.1 to 2.4.0 (#20)

3ddd820 Bump @types/jest from 26.0.15 to 27.0.1 (#13)

732ab0a Bump ts-jest from 26.4.4 to 26.5.6 (#15)

7efd9da Bump eslint from 7.14.0 to 7.32.0 (#14)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump path-parse from 1.0.6 to 1.0.7
Bumps path-parse from 1.0.6 to 1.0.7.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
build(deps): bump ws from 7.4.2 to 7.4.6
Bumps ws from 7.4.2 to 7.4.6.

Release notes

Sourced from ws's releases.

7.4.6

Bug fixes

Fixed a ReDoS vulnerability (00c425ec).

A specially crafted value of the Sec-Websocket-Protocol header could be used to significantly slow down a ws server.

for (const length of [1000, 2000, 4000, 8000, 16000, 32000]) { const value = 'b' + ' '.repeat(length) + 'x'; const start = process.hrtime.bigint(); value.trim().split(/ *, */); const end = process.hrtime.bigint();
console.log('length = %d, time = %f ns', length, end - start); }

The vulnerability was responsibly disclosed along with a fix in private by Robert McLaughlin from University of California, Santa Barbara.

In vulnerable versions of ws, the issue can be mitigated by reducing the maximum allowed length of the request headers using the --max-http-header-size=size and/or the maxHeaderSize options.

7.4.5

Bug fixes

UTF-8 validation is now done even if utf-8-validate is not installed (23ba6b29).

Fixed an edge case where websocket.close() and websocket.terminate() did not close the connection (67e25ff5).

7.4.4

Bug fixes

Fixed a bug that could cause the process to crash when using the permessage-deflate extension (92774377).

7.4.3

Bug fixes

The deflate/inflate stream is now reset instead of reinitialized when context takeover is disabled (#1840).

Commits

f5297f7 [dist] 7.4.6

00c425e [security] Fix ReDoS vulnerability

990306d [lint] Fix prettier error

32e3a84 [security] Remove reference to Node Security Project

8c914d1 [minor] Fix nits

fc7e27d [ci] Test on node 16

587c201 [ci] Do not test on node 15

f672710 [dist] 7.4.5

67e25ff [fix] Fix case where abortHandshake() does not close the connection

23ba6b2 [fix] Make UTF-8 validation work even if utf-8-validate is not installed

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Parent Display Flex Issue

Placeholder-Loading is not showing up when the parent's "display" is set to "flex".

Edit: It seems by manually setting the width of the placeholder-loading div containing it to "inherit" fixes the issue.

Code Example: <div class="d-flex flex-column align-items-center bg-white shadow-sm tw-rounded-lg tw-w-80"> <div class="d-flex tw-pt-7 tw-pb-4"> ... </div> <div v-if="postsLoaded" class="list-group"> <a v-for="post in posts" :key="post.index" :href="post.post_link" class="list-group-item list-group-item-action border-0 tw-px-8"> ... </a> </div> <div v-else style="width: inherit;"> <div class="ph-item"> <div class="ph-col-12"> <div class="ph-picture"></div> <div class="ph-row"> <div class="ph-col-6 big"></div> <div class="ph-col-4 empty big"></div> <div class="ph-col-2 big"></div> <div class="ph-col-4"></div> <div class="ph-col-8 empty"></div> <div class="ph-col-6"></div> <div class="ph-col-6 empty"></div> <div class="ph-col-12"></div> </div> </div> </div> </div> <div class="d-flex justify-content-end w-100 tw-p-4"> ... </div> </div>

Regards Adam

opened by kamyar-nemati 0
Align center
Currently the whole grid system is made for text with left or right align but what about centered text? E.g. just an image with text centered below it.

That is even hard to do with the current options since there are only even col-sizes like 2, 4, 6, 12 which is very limiting, e.g. the following is not possible:

.col-3.empty --- .col-6 --- .col-3-empty

Maybe we could add a simple .center class to the .ph-item?
opened by MickL 1

Releases(0.6.0)

0.6.0(Jun 24, 2022)
updates all npm packages

Source code(tar.gz)
Source code(zip)
0.5.0(Aug 9, 2021)
closes https://github.com/zalog/placeholder-loading/issues/37

updates all npm packages

Source code(tar.gz)
Source code(zip)
0.4.0(Apr 3, 2021)
Merge pull request #22 from MickL/wrapper-improvements

Merge pull request #25 from zalog/feature/adds-direction

Merge pull request #26 from zalog/feature/adds-event-cols-var

Merge pull request #28 from zalog/feature/updates-npm

Merge pull request #29 from zalog/feature/indenting

Merge pull request #30 from zalog/feature/adds-lints

tnks @MickL @DKhalil
Source code(tar.gz)
Source code(zip)