zalog / placeholder-loading Goto Github PK

View Code? Open in Web Editor NEW

1.5K 25.0 149.0 1.36 MB

Simple and flexible, css only, content placeholder loading animation. https://zalog.github.io/placeholder-loading/

License: MIT License

JavaScript 16.35% HTML 66.16% SCSS 17.50%

placeholder animation content-loading loading

placeholder-loading's Introduction

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

placeholder-loading's People

Contributors

Stargazers

Watchers

Forkers

dpesofficial nagnibedamihai adioslabs jqueryalmeida b4r05 cloudinnovates thasophearak nishant8bits omkarkirpan cristianogil betoap subin-george zeeshan1 ismailshurrab naveenkumarmatturthi khalidahmada wibgates giobero999 prazvan tokkaido khiemnd5 rajarajankamban itformunica mcfaith9 jfplataroti willi-dev anhnguyen1494 zorian1993 johnblesswin lennox-brain funky-i srmagura freemember007 ruivoh abdialeh hadimazalan idimma shadi375 boykioyb jerfeson rahulmeshram poepanda darkterminal prasx bzez vodouzohevicleef siddmegadeth asithc luisjosuesantanaperez adityarifqyfauzan tpatartmajeur ldonjibson louisbaclao kasonz abogoud mysticmetal jiboncoco harshalone tamzidkarim ramvishvas lnked theabdulbari 4li-ra rafatol engremdad imaginabit sd-design pamphile15 italocostabr michaelmaleki stockitories lightsaber6000 annamalai-d94 liuderchi tushcode dwsyoyo codinronan vishalanandl177 aungkhantzaw777 netanel89 devfoysal hidjrahs zhkuskov 1caxz nzuqi krlosg piseysen ibnurizqiaramadan evdeveloper demoheart lil5 shangshanruoshui77 amit08255 k4ng-fork prima23 bahramzade tiaoricardo dirgareborn ivnku mickl

placeholder-loading's Issues

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!

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

Class "ph-col-9" is not work

and other...

Replacing skeleton loader with real data

Can you please post an example of data within the divs without having styling issue.

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?

Rtl support version

Need to add rtl support also.

doesn't work with ionic

can you check for that?

Not working inside of table

Hi, Thanks for your amazing plugin, it works very well until I try to use it inside of a table. Here is my sample code:

<div class="table-responsive-md">

            // after page rendered, the div for ph-item will appear here...

            <table class="table table-hover mb-0">

              <thead>
                <tr>
                  <th scope="col">header1</th>
                  <th scope="col">header2</th>
                  <th scope="col">header3</th>
                  <th scope="col">header4</th>
                  <th scope="col">header5</th>
                  <th scope="col">header6</th>
                </tr>
              </thead>

              <tbody id="users-body">
                  <div class="ph-item">
                    <div class="ph-col-12">
                      <div class="ph-picture"></div>
                    </div>
                  </div>
              </tbody>

            </table>
</div>

but after the page is rendered, the div.ph-item will appearing inside of div class="table-responsive-md" instead of tbody id="users-body", which is very strange. Appreicate with help of any kinds, thanks.

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.

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!