{"_id":"@anzflex/ngx-skeleton-loader","_rev":"3-37ab6003474590f523e70931db370871","name":"@anzflex/ngx-skeleton-loader","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.1":{"name":"@anzflex/ngx-skeleton-loader","version":"1.0.1","keywords":["skeleton","loader","angular","angular skeleton","angular skeleton loader","angular loader","anzflex","@anzflex"],"author":{"name":"anzuannbabu anzflex-ui"},"license":"MIT","_id":"@anzflex/ngx-skeleton-loader@1.0.1","maintainers":[{"name":"anzuannbabu","email":"alanzuann@gmail.com"}],"homepage":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader#readme","bugs":{"url":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/issues"},"dist":{"shasum":"93e938199048711a842f8a32bde8497c5d987fd0","tarball":"https://registry.npmjs.org/@anzflex/ngx-skeleton-loader/-/ngx-skeleton-loader-1.0.1.tgz","fileCount":5,"integrity":"sha512-PnzsbwfoJSlHvb2xehwKCE6bcwAlqblaArw0KMlt1P+mDN/uK6ncVWI6abxbk2tZYU8Vc/Y5oCD0CjD841RU1Q==","signatures":[{"sig":"MEUCIGvcXSdttWxPAMpLjDl2XWU0eOZfkx5f6viPgA0EJOx8AiEArX+7j45mqDTpH/PCZG4oQN4AsyRZMQDn8k0oD0ErO7I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32397},"module":"fesm2022/anzflex-ngx-skeleton-loader.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/anzflex-ngx-skeleton-loader.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2588a9afcde906e7bcd84ac79538c9a1f7bd2c51","typings":"index.d.ts","_npmUser":{"name":"anzuannbabu","email":"alanzuann@gmail.com"},"repository":{"url":"git+https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader.git","type":"git"},"_npmVersion":"10.9.2","description":"skeleton loader for angular projects","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=19.0.0 <21.0.0","@angular/common":">=19.0.0 <21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-skeleton-loader_1.0.1_1763477958138_0.8592693164088987","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@anzflex/ngx-skeleton-loader","version":"1.1.1","keywords":["skeleton","loader","angular","angular skeleton","angular skeleton loader","angular loader","anzflex","@anzflex"],"author":{"name":"anzuannbabu anzflex-ui"},"license":"MIT","_id":"@anzflex/ngx-skeleton-loader@1.1.1","maintainers":[{"name":"anzuannbabu","email":"alanzuann@gmail.com"}],"homepage":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader#readme","bugs":{"url":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/issues"},"dist":{"shasum":"d91df8a5e645df6e78098344e674a97f080c6650","tarball":"https://registry.npmjs.org/@anzflex/ngx-skeleton-loader/-/ngx-skeleton-loader-1.1.1.tgz","fileCount":26,"integrity":"sha512-V7u/hEKoowSw5CrNrxzVvQgF/kZJJrM6MbrbCYOOUqLFrP2bsndxUUplDyoB/IVctWTJKWknpn8H52VxdhZHKg==","signatures":[{"sig":"MEUCIQCqyqR6a+ro1iXA2vSRt0tkocVopL+s7lUszp6PJ/6VYgIgMxgybvnNLzv7x/MDuTHha2CSlDU+5SllhGa6d0ODa3I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84360},"gitHead":"fc887ec359d7cf6de01a1b6298e5cd27195062bf","_npmUser":{"name":"anzuannbabu","email":"alanzuann@gmail.com"},"repository":{"url":"git+https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader.git","type":"git"},"_npmVersion":"10.9.2","description":"skeleton loader for angular projects","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=19.0.0","@angular/common":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-skeleton-loader_1.1.1_1773219637551_0.9392999881049628","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@anzflex/ngx-skeleton-loader","version":"1.1.2","peerDependencies":{"@angular/common":">=19.0.0","@angular/core":">=19.0.0"},"author":{"name":"anzuannbabu anzflex-ui"},"description":"skeleton loader for angular projects","keywords":["skeleton","loader","angular","angular skeleton","angular skeleton loader","angular loader","anzflex","@anzflex"],"repository":{"type":"git","url":"git+https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader.git"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"license":"MIT","module":"fesm2022/anzflex-ngx-skeleton-loader.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/anzflex-ngx-skeleton-loader.mjs"}},"_id":"@anzflex/ngx-skeleton-loader@1.1.2","gitHead":"fc887ec359d7cf6de01a1b6298e5cd27195062bf","bugs":{"url":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/issues"},"homepage":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-6v0QCEzJDCVXEP8FWqvrw4kP5GtfXspK4atx+zsNcsxEVahWPdpFG9P8r1s3LK+YpcGAemMDRId2c3YxIXflhg==","shasum":"eb326dbb9a68727df73692f762bca0a84cb41150","tarball":"https://registry.npmjs.org/@anzflex/ngx-skeleton-loader/-/ngx-skeleton-loader-1.1.2.tgz","fileCount":5,"unpackedSize":32381,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDqhUm047d0sUUMVh8c3DApwrCpt+tX+nmxBH5X3TQfPQIgHjx3xg85TuH3wOSHH9g5zFg/+h8EoX28W1wRTT+IyYI="}]},"_npmUser":{"name":"anzuannbabu","email":"alanzuann@gmail.com"},"directories":{},"maintainers":[{"name":"anzuannbabu","email":"alanzuann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-skeleton-loader_1.1.2_1773227116102_0.07920814611098992"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-18T14:59:18.032Z","modified":"2026-03-11T11:05:16.422Z","1.0.1":"2025-11-18T14:59:18.316Z","1.1.1":"2026-03-11T09:00:37.770Z","1.1.2":"2026-03-11T11:05:16.266Z"},"bugs":{"url":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/issues"},"author":{"name":"anzuannbabu anzflex-ui"},"license":"MIT","homepage":"https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader#readme","keywords":["skeleton","loader","angular","angular skeleton","angular skeleton loader","angular loader","anzflex","@anzflex"],"repository":{"type":"git","url":"git+https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader.git"},"description":"skeleton loader for angular projects","maintainers":[{"name":"anzuannbabu","email":"alanzuann@gmail.com"}],"readme":"# @anzflex/ngx-skeleton-loader\n\n\n# Installation\n\n```\nnpm install --save @anzflex/ngx-skeleton-loader\n```\n\n# Version Compatibility\n\nLoader is compatible with Angular 19.x and newer\n\n## Usage\n\nTo use the `@anzflex/ngx-skeleton-loader` component in your Angular application, follow these steps:\n\n### Step 1: Import the Component\nimport `@anzflex/ngx-skeleton-loader` components where you want to use them\n```ts\n//app.ts\nimport { NgxSkeletonLoader, NgxTableLoader, NgxProfileLoader, NgxCardLoader } from '@anzflex/ngx-skeleton-loader';\n\n@Component({\n  selector: 'app-root',\n  imports: [NgxSkeletonLoader, NgxTableLoader, NgxProfileLoader, NgxCardLoader],\n  templateUrl: './app.html',\n  styleUrl: './app.scss'\n})\nexport class App {\n  //... your component logics here\n}\n```\n\n```html\n<!-- app.html -->\n    <div class=\"container\">\n   <div style=\"margin-top: 30px;margin-bottom:15px;\">Shapes</div>\n <div class=\"shapes\">\n   <ngx-skeleton-loader height=\"100px\" width=\"100px\" color=\"#dedede\" radius=\"50%\" />\n  <ngx-skeleton-loader height=\"100px\" width=\"100px\" color=\"#dedede\" radius=\"0%\" />\n  <ngx-skeleton-loader height=\"100px\" width=\"100px\" color=\"#dedede\" radius=\"20px\" />\n  <div>\n    <ngx-skeleton-loader height=\"15px\" width=\"300px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n    <ngx-skeleton-loader height=\"15px\" width=\"300px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n    <ngx-skeleton-loader height=\"15px\" width=\"300px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n    <ngx-skeleton-loader height=\"15px\" width=\"200px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n  </div>\n </div>\n  <div style=\"margin-top: 30px;margin-bottom:15px;\">Table Loader</div>\n  <ngx-table-skeleton-loader />\n  <div style=\"margin-top: 30px;margin-bottom:15px;\">Profile Loader</div>\n  <ngx-profile-skeleton-loader width=\"500px\" radius=\"12px\" />\n  <div style=\"margin-top: 30px;margin-bottom:15px;\">Card Loader</div>\n  <ngx-card-skeleton-loader width=\"40%\" imageHeight=\"300px\" />\n</div>\n\n```\n## Custom Shapes Preview\n\n```html \n    <div class=\"shapes\">\n   <ngx-skeleton-loader height=\"100px\" width=\"100px\" color=\"#dedede\" radius=\"50%\" />\n  <ngx-skeleton-loader height=\"100px\" width=\"100px\" color=\"#dedede\" radius=\"0%\" />\n  <ngx-skeleton-loader height=\"100px\" width=\"100px\" color=\"#dedede\" radius=\"20px\" />\n  <div>\n    <ngx-skeleton-loader height=\"15px\" width=\"300px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n    <ngx-skeleton-loader height=\"15px\" width=\"300px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n    <ngx-skeleton-loader height=\"15px\" width=\"300px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n    <ngx-skeleton-loader height=\"15px\" width=\"200px\"  radius=\"10px\" [margin]=\"{bottom: '10px'}\" />\n  </div>\n </div>\n```\n![preview](https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/blob/main/public/pics/shapes.png?raw=true)\n## Table Skeleton Loader Preview\n\n```html \n    <ngx-table-skeleton-loader />\n```\n\n![Examople](https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/blob/main/public/pics/table.png?raw=true)\n## Card Skeleton Loader Preview\n\n```html \n    <ngx-card-skeleton-loader width=\"40%\" imageHeight=\"300px\" />\n```\n![Examople](https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/blob/main/public/pics/card.png?raw=true)\n## Profile Skeleton Loader Preview\n\n```html \n   <ngx-profile-skeleton-loader width=\"500px\" radius=\"12px\" />\n```\n\n![Examople](https://github.com/anzuannbabu/-anzflex-ngx-skeleton-loader/blob/main/public/pics/profile.png?raw=true)","readmeFilename":"README.md"}