rt-skeleton

v18.0.1TypeScript

Angular component for skeleton loading

angular skeleton loading spinner progress

31/weekUpdated 1 years agoMITUnpacked: 157.8 KB

Published by andriy_podolian

npm install rt-skeleton

Repository Homepage npm

RT_SKELETON

![](/projects/rt-skeleton/rt-skeleton.gif)

- Version 1.1.0 - Add rtSkeletonPlaceholderContainer directive
- Version 1.1.1 - Fix export rtSkeletonPlaceholderContainer directive
- Version 1.1.2 - Edit readme
- Version 1.1.3 - Changed removing elements on display none
- Version 1.1.4 - Change display block on flex for rtSkeletonPlaceholderContainer
- Version 1.2.0 - Add rightSkeleton option for rtSkeletonPlaceholder directive
- Version 1.3.0 - Changed rightSkeleton option on marginSkeleton for rtSkeletonPlaceholder directive
- Version 1.3.1 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
- Version 1.3.2 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
- Version 1.3.3 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
- Version 1.3.4 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
- Version 1.3.5 - Fix bug with marginSkeleton option for rtSkeletonPlaceholder directive
- Version 1.3.6 - Optimization for rtSkeletonPlaceholder directive
- Version 1.3.7 - Set pointer-events none for rtSkeletonPlaceholder directive
- Version 1.4.0 - Add rtSkeletonIf directive
- Version 1.4.1 - Fix a bug related to remapping in rtSkeletonIf directive
- Version 1.4.2 - Fix bug related visibility for rtSkeletonIf directive (Added detectChanges)

Install

``bash npm i rt-skeleton`

`bash yarn add rt-skeleton`

`Usage`

`rtSkeletonPlaceholderContainer`

This directive sets the attribute for removing elements from DOM after loaded



rtSkeletonContainer

This directive sets the attribute for removing elements from DOM after loaded


rtSkeletonPlaceholder directive
| Option                | Default | Type  | Description |
|-----------------------|---------|-------|-------------|
| widthSkeleton     | 100%    | Input |             |
| heightSkeleton    | 100%    | Input |             |
| radiusPlaceholder | 5px     | Input |             |
| leftSkeleton      | 0       | Input |             |
rtSkeletonContainer directive
| Option                | Default | Type  | Description                     |
|-----------------------|---------|-------|---------------------------------|
| iterations        | 1       | Input | amount mock containers for load |

rtForSkeleton extended by ngFor directive

`$3`

css
@import 'node_modules/rt-skeleton/styles/styles.scss';

`css

.rt-skeleton-segment {

background: linear-gradient(0.85turn, rgba(39, 39, 39, 0.09), rgba(39, 39, 39, 0.03), rgba(39, 39, 39, 0.09)); animation: colorChange 2s infinite linear;

@keyframes colorChange { from { background-position: top 0 left 0; background-size: 1000% } 50% { background-position: top center; background-size: 1000% } to { background-position: top 0 right 0; background-size: 1000% } } }

`Use for single item`

- Note that we are creating a `rtSkeletonIf="item$ | async as data"` object instead of the usual `ngIf="item$ | async"`

`html


                *rtSkeletonIf="item$ | async as data; else emptyList"
            class="rt-skeleton__item"
    >
                        class="item__avatar"
                rtSkeletonPlaceholder
                radiusPlaceholder="50%"
                widthSkeleton="50px"
                heightSkeleton="50px"
        >

Name: 
                             class="item__value">{{data.name.first_name}}


        Age: 
            {{data.age}}

        

        address: 
            {{data.address}}

        
        
phone: 
            {{data.phone}}


    The list is empty


Use for list

`html

rtSkeletonContainer [iterations]="5" [while]="inProgress$ | async" class="rt-skeleton-example__container" > class="rt-skeleton__item" *rtForSkeleton="let data of items$ | async;" > rtSkeletonPlaceholder radiusPlaceholder="50%" widthSkeleton="50px" heightSkeleton="50px" class="item__avatar" >


      Name:

      {{data.name.first_name}}


    
      Age:

      {{data.age}}

    

    
      Address:

      {{data.address}}

    

    
      Phone:

      {{data.phone}}

https://www.regulus.team/

RT_SKELETON

![](/projects/rt-skeleton/rt-skeleton.gif)

Install

``bash npm i rt-skeleton`

`bash yarn add rt-skeleton`

`Usage`

`rtSkeletonPlaceholderContainer`

This directive sets the attribute for removing elements from DOM after loaded



rtSkeletonContainer

This directive sets the attribute for removing elements from DOM after loaded


rtSkeletonPlaceholder directive
| Option                | Default | Type  | Description |
|-----------------------|---------|-------|-------------|
| widthSkeleton     | 100%    | Input |             |
| heightSkeleton    | 100%    | Input |             |
| radiusPlaceholder | 5px     | Input |             |
| leftSkeleton      | 0       | Input |             |
rtSkeletonContainer directive
| Option                | Default | Type  | Description                     |
|-----------------------|---------|-------|---------------------------------|
| iterations        | 1       | Input | amount mock containers for load |

rtForSkeleton extended by ngFor directive

`$3`

css
@import 'node_modules/rt-skeleton/styles/styles.scss';

`css

.rt-skeleton-segment {

background: linear-gradient(0.85turn, rgba(39, 39, 39, 0.09), rgba(39, 39, 39, 0.03), rgba(39, 39, 39, 0.09)); animation: colorChange 2s infinite linear;

`Use for single item`

- Note that we are creating a `rtSkeletonIf="item$ | async as data"` object instead of the usual `ngIf="item$ | async"`

`html


                *rtSkeletonIf="item$ | async as data; else emptyList"
            class="rt-skeleton__item"
    >
                        class="item__avatar"
                rtSkeletonPlaceholder
                radiusPlaceholder="50%"
                widthSkeleton="50px"
                heightSkeleton="50px"
        >

Name: 
                             class="item__value">{{data.name.first_name}}


        Age: 
            {{data.age}}

        

        address: 
            {{data.address}}

        
        
phone: 
            {{data.phone}}