{"id":15138348,"url":"https://github.com/nikbabchenko/skeleton-webcomponent","last_synced_at":"2025-10-23T14:31:13.730Z","repository":{"id":44076904,"uuid":"304741447","full_name":"nikbabchenko/skeleton-webcomponent","owner":"nikbabchenko","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-09T15:24:17.000Z","size":234,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-30T18:52:06.971Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikbabchenko.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-16T21:23:06.000Z","updated_at":"2024-06-25T20:59:24.000Z","dependencies_parsed_at":"2023-02-08T12:30:54.339Z","dependency_job_id":null,"html_url":"https://github.com/nikbabchenko/skeleton-webcomponent","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikbabchenko%2Fskeleton-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikbabchenko%2Fskeleton-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikbabchenko%2Fskeleton-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikbabchenko%2Fskeleton-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikbabchenko","download_url":"https://codeload.github.com/nikbabchenko/skeleton-webcomponent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237843706,"owners_count":19375191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-26T07:22:18.408Z","updated_at":"2025-10-23T14:31:13.311Z","avatar_url":"https://github.com/nikbabchenko.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://stand-with-ukraine.pp.ua)\n\n\n![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n# Skeleton Loader Webcomponent\n![Variants](https://skeleton-webcomponent-loader.web.app/images/variants.gif)\n\n**Skeleton Loader** is a very lightweight (less than **5kb** gzip) webcomponent to make beautiful, animated loading skeletons in any web app - pure html/css/js or Angular/React.\n\n\u003e Spinners and loaders have traditionally been the way to tell users\n\u003e that content is going to take a while to load. While this approach is\n\u003e great, it’s quickly becoming obsolete in modern development. Skeleton\n\u003e screens are becoming the perfect replacement for traditional loaders\n\u003e because they focus on progress rather than wait times, hence reducing\n\u003e loading-time frustration...\n\n-- [#Smashing Magazine - Implementing Skeleton Screens In React ](https://www.smashingmagazine.com/2020/04/skeleton-screens-react/)\n\n![In Action](https://skeleton-webcomponent-loader.web.app/images/loader-example.gif)\n\n## Demos\n[Skeleton Loader Home Page](https://skeleton-webcomponent-loader.web.app/)\n\n### Install\nYou can get it on NPM installing  `skeleton-webcomponent-loader`   as a project dependency or via UNPKG\n\n    npm i skeleton-webcomponent-loader\n    \n#### Script tag via UNPKG (global npm delivery network)\n    \u003cscript  type=\"module\"  src=\"https://unpkg.com/skeleton-webcomponent-loader@1.0.5/dist/skeleton-webcomponent/skeleton-webcomponent.esm.js\"\u003e\u003c/script\u003e\n    \u003cscript  type=\"nomodule\"  src=\"https://unpkg.com/skeleton-webcomponent-loader@1.0.5/dist/skeleton-webcomponent/skeleton-webcomponent.js\"\u003e\u003c/script\u003e\n\n#### Script tag via npm\n    \u003cscript  type=\"module\"  src=\"./node_modules/skeleton-webcomponent-loader/dist/skeleton-webcomponent/skeleton-webcomponent.esm.js\"\u003e\u003c/script\u003e\n    \u003cscript  type=\"nomodule\"  src=\"./node_modules/skeleton-webcomponent-loader/dist/skeleton-webcomponent/skeleton-webcomponent.js\"\u003e\u003c/script\u003e\n\n#### ESM import (Webpack/Browsers which support ES modules/Angular/React)\n\n    import {defineCustomElements as initSkeleton} from  './node_modules/skeleton-webcomponent-loader/loader/index.js';\n    initSkeleton();\n\n#### Angular\nIn app.module.ts or any module which uses skeleton in order to provide ability to use webcomponents: \n\n    @NgModule({\n      //whatever you have on app module goes here... \n      schemas: [CUSTOM_ELEMENTS_SCHEMA]\n    })\n    export class AppModule {}\n\nAnd in **main.ts:** or you can add it via **stript tags** in index.html as described before\n\n    import { defineCustomElements as initSkeleton } from  'skeleton-webcomponent-loader/loader';\n    initSkeleton();\n\n### How to use?\n- Add to the page \n- Put to the html/jsx/whatever...\n\n        \u003cnb-skeleton\u003e\u003c/nb-skeleton\u003e \n\nPass properties and see it in action\n\n\n### Properties\n\n| Property       | Attribute       | Description                                                         | Type                                                  | Default      |\n| -------------- | --------------- | ------------------------------------------------------------------- | ----------------------------------------------------- | ------------ |\n| `animation`    | `animation`     | Animation type                                                      | `\"false\" | \"progress\" | \"progress-dark\" | \"pulse\"` | `'progress'` |\n| `count`        | `count`         | Number of rows of current skeleton type                             | `number`                                              | `1`          |\n| `customStyles` | `custom-styles` | Custom css styles (background/margins/width/height etc.)            | `string | { [key: string]: string; }`                  | `{}`         |\n| `height`       | `height`        | Height of the skeleton ex. 100px, 100%, auto etc.                   | `string`                                              | `null`       |\n| `showWarnings` | `show-warnings` | Whether to show warnings for the wrong animation type/custom styles | `boolean`                                             | `true`       |\n| `variant`      | `variant`       | Variant of the skeleton - circle or row                             | `\"circle\" | \"rect\" | \"text\"`                        | `'text'`     |\n| `width`        | `width`         | Width of the skeleton ex. 100px, 100%, auto etc.                    | `string`                                              | `null`       |\n\n\n### CSS Custom Properties\n\n| Name                       | Description                                                           |\n| -------------------------- | --------------------------------------------------------------------- |\n| `--skeleton-background`    | Skeleton background: Default: #eff1f6                                 |\n| `--skeleton-border-radius` | Skeleton border-radius: Default: 4px for the row, 50% for the circle  |\n| `--skeleton-height`        | Skeleton height: Default: 20px for the row, 40px for the circle       |\n| `--skeleton-margin-bottom` | Skeleton margin-bottom: Default: 10px for the row, 5px for the circle |\n| `--skeleton-width`         | Skeleton width: Default: 100% for the row, 40px for the circle        |\n\n\nInspired by [ngx-skeleton-loader](https://github.com/willmendesneto/ngx-skeleton-loader)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikbabchenko%2Fskeleton-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikbabchenko%2Fskeleton-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikbabchenko%2Fskeleton-webcomponent/lists"}