GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → zalog → Placeholder Loading

zalog / Placeholder Loading

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

Labels

htmlanimationloadingplaceholder

Projects that are alternatives of or similar to Placeholder Loading

React Content Loader
⚪ SVG-Powered component to easily create skeleton loadings.
Stars: ✭ 11,830 (+940.46%)
Mutual labels:  loading, placeholder
Statefulviewcontroller
Placeholder views based on content, loading, error or empty states
Stars: ✭ 2,139 (+88.13%)
Mutual labels:  loading, placeholder
Skeletonview
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
Stars: ✭ 10,804 (+850.22%)
Mutual labels:  loading, placeholder
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+145.38%)
Mutual labels:  loading, placeholder
koleton
The easiest library to show skeleton screens in an Android app.
Stars: ✭ 84 (-92.61%)
Mutual labels:  placeholder, loading
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (-62.18%)
Mutual labels:  loading, placeholder
Hgplaceholders
Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project
Stars: ✭ 2,048 (+80.12%)
Mutual labels:  loading, placeholder
Tabanimated
A skeleton screen framework based on native for iOS. (一个由iOS原生组件映射出骨架屏的框架，包含快速植入，低耦合，兼容复杂视图等特点，提供国内主流骨架屏动画的加载方案，同时支持上拉加载更多、自定制动画。)
Stars: ✭ 2,909 (+155.85%)
Mutual labels:  loading, placeholder
react-loading-placeholder
Loading placeholer, inspired by Facebook
Stars: ✭ 17 (-98.5%)
Mutual labels:  placeholder, loading
Skeletonui
☠️ Elegant skeleton loading animation in SwiftUI and Combine
Stars: ✭ 275 (-75.81%)
Mutual labels:  loading, placeholder
Vue Content Loading
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Stars: ✭ 729 (-35.88%)
Mutual labels:  loading, placeholder
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-95.87%)
Mutual labels:  loading
Loading
loading...正在加载中的动画效果
Stars: ✭ 36 (-96.83%)
Mutual labels:  loading
Superplaceholder.js
⚡Super charge your input placeholders
Stars: ✭ 978 (-13.98%)
Mutual labels:  placeholder
Spinners
A Sass mixin to generate fully customizable, pure CSS3 loading/busy indicators
Stars: ✭ 33 (-97.1%)
Mutual labels:  loading
Babel Plugin Partial Application
[DEPRECATED] Please use https://github.com/citycide/param.macro
Stars: ✭ 60 (-94.72%)
Mutual labels:  placeholder
Wynullview
An easy way to use for view's empty state 一行代码显示空视图，高度自定义
Stars: ✭ 44 (-96.13%)
Mutual labels:  placeholder
Load Seed
⌛️ Garry's Mod loading screen skeleton to help developers quickly get started in building their own.
Stars: ✭ 31 (-97.27%)
Mutual labels:  loading
Dialogutil
common used dialog with material style ( in support v7)，ios style，get top activity automatically, invoke everywhere (any thread , any window)
Stars: ✭ 948 (-16.62%)
Mutual labels:  loading
Statusprovider
Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views
Stars: ✭ 879 (-22.69%)
Mutual labels:  loading
View All Similar Projects ➔

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-bg:                   #fff !default;
$ph-color:                #ced4da !default;
$ph-border-radius:        2px !default;

$ph-gutter:               30px !default;
$ph-spacer:               15px !default;

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

$ph-animation-duration:   .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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].