Getting Started

sk-loader • version 2.1.2

Installation

This step applies only to project managed with npm. If you have a plain/vanilla JavaScript project or a static website not managed by npm (node package manager) skip to the next step at Javascript - plain website/app section.

Copy the installation command below, paste it in your terminal, run it and let the magic begins. Make sure to be in the root folder of your project.

$ npm install sk-loader Copy

Package Setup

The setup depends on the project's framework. Below are presented the setup instructions for Javascript - plain website/app, Angular and React. The sk-loader package is a collection of web components so it works with any type of framework. If you don't find your project's framework in the list, use the Javascript - plain website/app approach. More setup instructions for diffrent frameworks are yet to be added.

Javascript - plain website/app

index.html

                                
<head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/sk-loader@2.1.2/dist/sk-loader/sk-loader.css">
    <script type="module">
        import { defineCustomElements } from 'https://unpkg.com/sk-loader@2.1.2/loader/index.es2017.js';
        defineCustomElements();
    </script>
</head>
<body>
    ...
    <sk-loader-image></sk-loader-image>
    <sk-loader-text rows="5" indent></sk-loader-text>
    ...
</body>

Angular app

app.module.ts

                                
@NgModule({
    ...
    // Add CUSTOM_ELEMENTS_SCHEMA to schemas
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

main.ts

                                
// other imports
...
import { defineCustomElements } from 'sk-loader/loader';

// other logic
...
defineCustomElements(window);

angular.json

                                
{
    "build": {
        "styles": [
            "src/styles.scss",
            "./node_modules/sk-loader/dist/sk-loader/sk-loader.css"
        ],
    }
}

new-component.component.html

                                
<div class="container">
    <!-- Use it before the content loads -->
    <sk-loader-text *ngIf="isLoading" rows="2" indent><sk-loader-text>
    <p *ngIf="!isLoading" class="text-indent">
        {{ 'This dynamic text comes from the server' }}
    </p>
</div>

React app

index.js

                                
// other imports
...
import 'sk-loader/dist/sk-loader/sk-loader.css';
import { defineCustomElements } from 'sk-loader/loader';

// other logic
...
defineCustomElements();

new-component.tsx

                                
function NewComponent() {
    return (
        <div className="container">
            { isLoading ? 
                <sk-loader-text rows="2" indent /> :
                <p className="text-indent">
                    { 'This dynamic text comes from the server' }
                </p>
            }
        </div>
    );
}