ngx-skeleton-loader-demo

    2.4.1 • Public • Published

    NGX Skeleton loader

    npm downloads Dependency Status npm

    NPM NPM

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

    ngx-skeleton-loader in action

    Why skeletons?

    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 <ngx-skeleton-loader> 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;
    <div class="item">
      <ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader>
    </div>

    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: it will disable the animation;
    • 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.

    <!--
    If you need to change all the background wrapper
    you need to apply the style changes on the 
    `ngx-skeleton-loader` component wrapper
    -->
    <div class="item">
      <!-- Disables the animation -->
      <ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
      <!-- Uses `progress` as animation -->
      <ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
      <ngx-skeleton-loader></ngx-skeleton-loader>
      <!-- Uses `pulse` as animation -->
      <ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
    </div>

    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.

    <!--
    If you need to change all the background wrapper
    you need to apply the style changes on the 
    `ngx-skeleton-loader` component wrapper
    -->
     
    <div style="background: #FF0001; padding: 10px;">
      <ngx-skeleton-loader
        count="5"
        [theme]="
          'border-radius': '5px',
          height: '50px',
          'background-color': '#992929',
          border: '1px solid white'
        }"
      ></ngx-skeleton-loader>
    </div>

    ⚠️ 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 <ngx-skeleton-loader> 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 componennt HTML code is

    <!--
    file: my-ngx-skeleton-loader-with-theming.component.html
     
    As an example, it's not using themes via [theme] attributes.
    -->
     
    <ngx-skeleton-loader
        count="5"
        animation="pulse"
      ></ngx-skeleton-loader>

    You can apply theme changes in our stylesheet. At the end it will be

    /* file: `my-ngx-skeleton-loader-with-theming.component.css`
     *
     * You can find more details about `:host` at
     * Angular Component Style Docs https://angular.io/guide/component-styles#host
     */
    :host >>> ngx-skeleton-loader .loader {
      border-radius: 5px;
      height: 50px;
      background-color: #992929;
      border: 1px solid white;
    }

    You should change the styles on the skeleton wrapper element in case you need to change the background color. You can check the code details in the Stackblitz Live Demo Link or check it out a content load simulation in this Stackblitz Live Demo Link

    Development

    Run demo locally

    1. This project uses Angular CLI as base. That means you just need to run npm start and access the link http://localhost:4200 in your browser

    Run tests

    1. Run npm test for run tests. In case you want to test using watch, please use npm run tdd

    Publish

    this project is using np package to publish, which makes things straightforward. EX: np <patch|minor|major> --contents=dist/ngx-skeleton-loader

    For more details, please check np package on npmjs.com

    Contribute

    For any type of contribution, please follow the instructions in CONTRIBUTING.md and read CODE_OF_CONDUCT.md files.

    Author

    Wilson Mendes (willmendesneto)

    Install

    npm i ngx-skeleton-loader-demo

    DownloadsWeekly Downloads

    7

    Version

    2.4.1

    License

    MIT

    Unpacked Size

    76.5 kB

    Total Files

    53

    Last publish

    Collaborators

    • willmendesneto