Need help with ngx-skeleton-loader?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

willmendesneto
288 Stars 32 Forks MIT License 191 Commits 2 Opened issues

Description

Make beautiful, animated loading skeletons that automatically adapt to your Angular apps

Services available

!
?

Need anything else?

Contributors list

# 3,917
Shell
JavaScr...
codeign...
codeign...
125 commits
# 1,520
GraphQL
MongoDB
render-...
formik
11 commits
# 574,632
TypeScr...
ghost
Angular
HTML
2 commits
# 38,723
HTML
angular...
CSS
angular...
1 commit

NGX Skeleton loader

npm downloads npm npm

NPM NPM

Build Status Coverage Status npm bundle size (minified + gzip) npm

ngx-skeleton-loader in action

Why skeletons?

If you want to get more details about that, please read "NGX-Skeleton-Loader — States, Animations, Performance, and Accessibility for your Angular App" blog post

The idea of this component is make the process transparent and easier. So the main point is integrate this component with other tooling process, such as:

  • Server-side rendering;
  • Progressive rendering;
  • Any other that you like :)

It's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉

Demo

Try out our demos on Stackblitz!

Install

You can get it on NPM installing

ngx-skeleton-loader
module as a project dependency.
npm install ngx-skeleton-loader --save

Setup

You'll need to add

NgxSkeletonLoaderModule
to your application module. So that, the
 components will be accessible in your application.
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({ declarations: [ YourAppComponent ], imports: [ ... NgxSkeletonLoaderModule, ... ], providers: [], bootstrap: [YourAppComponent] })

export class YourAppComponent {}

After that, you can use the

ngx-skeleton-loader
components in your templates, passing the configuration data into the component itself.
  • ngx-skeleton-loader
    : Handle the skeleton animation and the skeleton styles of your app;

Using
NgxSkeletonLoaderModule.forRoot()

Also, you can import the module in your app by calling

NgxSkeletonLoaderModule.forRoot()
when adding it. So it will be available across your Angular application.
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...

@NgModule({ declarations: [ YourAppComponent ], imports: [ ... NgxSkeletonLoaderModule.forRoot(), ... ], providers: [], bootstrap: [YourAppComponent] })

export class YourAppComponent {}

WAI-ARIA values

  • loadingText - default
    Loading...
    : attribute that defines the text value for
    aria-valuetext
    attribute. Defaults to "Loading..."

Appearance

You can also define which appearance want to use in your skeleton loader by passing the options in your component via

[appearance]
attribute.

Options

  • ''
    - default: it will use it
    ''
    as appearance. At the end, it will render like a line, but line is not a expected appearance to be passed;
  • circle
    : it will use
    circle
    as appearance. Great for avatar skeletons, for example :);

Animations

You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via

[animation]
attribute.

Options

  • "false"
    (as string): it will disable the animation;
  • false
    (as boolean): it will disable the animation. Animation will receive
    false
    as string when attribute field it's not using binding. Component now can receive
    false
    (boolean), "false" (string), or any other animation type via binding;
  • progress
    - default: it will use it
    progress
    as animation;
  • progress-dark
    : it will use it
    progress-dark
    as animation. Recommended if your color schema is darken;
  • pulse
    : it will use
    pulse
    as animation;

progress
is the default animation, used as the single one previously. If you don't pass the animation attribute, it defaults to
progress
.

You can check the code details in the Stackblitz Live Demo Link

Theming

You can also define different styles for the skeleton loader by passing an object with the css styles - in dashed case - into the component via

[theme]
attribute.

The [theme] attribute now accepts the same configuration as

ngStyle
as well. That means you can manage to use like you're doing with the built-in directive, having a pleasure and beautiful experience

⚠️ This is here only as a documentation, but it's not encouraged to be used. Please consider use it with caution ⚠️

Also, you can use CSS to add theme styles into your component. However, there are some implications:

  • You're using
    :host
    in your stylesheet, which means you are aware of any possible problem
    :host
    can create for your app at that level since it's based on
    :host
    DOM style scoping
  • You're adding stylesheet based on
     internal classes. It means that class naming changes on module's side will be breaking changes for your application as well.

As an example, your Component file is like this

import { Component } from '@angular/core';

@Component({ selector: 'my-ngx-skeleton-loader-with-theming', templateUrl: './my-ngx-skeleton-loader-with-theming.component.html', styleUrls: ['./my-ngx-skeleton-loader-with-theming.component.css'], }) export class MyNGXSkeletonLoaderWithThemingComponent { /* ... code goes here*/ }

And your component HTML code is

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.