Repository files navigation

⌛ Easily create skeleton loadings without SVG.

Live demohere.

Install ngx-skeleton via NPM, using the command below.

npm install @hugodcrq/ngx-skeleton

ImportNgxSkeletonModule in yourapp.module.

import{NgxSkeletonModule}from"@hugodcrq/ngx-skeleton";@NgModule({imports:[NgxSkeletonModule],})classAppModule{}

Import library styles to your globalstyles.scss file

@use"node_modules/@hugodcrq/ngx-skeleton/src/styles/styles.scss";

or if you use CSS add this to your styles inside yourangular.json:

{// projects.[your_project].architect.build.options"styles": ["node_modules/@hugodcrq/ngx-skeleton/src/styles/styles.css"]}

In.ts component

import{Component,inject,OnInit}from"@angular/core";import{NgxSkeletonService}from"@hugodcrq/ngx-skeleton";@Component({})exportclassAppComponentimplementsOnInit{skeleton=inject(NgxSkeletonService);// You can also inject via the constructorconstructor(){}ngOnInit(){this.skeleton.show();// simulate long task (3s) and hidesetTimeout(()=>{this.skeleton.hide();},3000);}}

In.html usehdSkeleton directive

<!-- with <div></div> wrapper for element without children --><divhdSkeleton><h1>Title exemple</h1></div><!-- directly on parent if element has children or add <div></div> wrapper --><divclass="card"hdSkeleton><divclass="card-header">Github logo</div><divclass="card-body"><imgsrc="https://www.vectorlogo.zone/logos/github/github-ar21.svg"alt="github"/></div></div>

• Git
  • Commit message
    • Use npm script
    • Use git
    • Format
    • Type

To respect the standard ofConventional Commits, things have been put in place, for more information see thegit section below.

Currently runs with:

• angular - Building mobile and desktop web applications
• semantic-release - Fully automated version management and package publishing
• commitlint - Checks if your commit messages meet the conventional commit format
• commitizen - Simple commit conventions from terminal prompt
• cz-git - Adapter for commitizen to custom easy configuration

By defaultgit-commit is disable with apre-commit hook to force usage ofnpm run commit

This command allow to create formatted commit message from prompt withcommitizen &cz-git.

npm run commit

You can disablepre-commit hook with--no-verify flag. But respect these rules below ⬇️

git commit --no-verify

• Format

  • A commit message consists of aheader,body andfooter.
  • The header has atype and asubject:

<type>[(<scope>)]: <emoji> <subject>[BLANK LINE][body][BLANK LINE][breaking changes][BLANK LINE][footer]

• Type

  • ✨feat — A new feature
  • 🐛fix — A bug fix
  • 📝docs — Documentation only changes
  • 💄style — Markup, white-space, formatting, missing semi-colons... not affect the meaning of the code
  • ♻refactor — A code change that neither fixes a bug or adds a feature
  • ⚡perf — A code change that improves performance
  • ✅test — Adding missing tests
  • 📦️build — Changes that affect the build system or external dependencies
  • 🎡ci — CI related changes
  • 🔨chore — Other changes that don't modify src or test files
  • ⏪️revert — Reverts a previous commit