{"id":18632416,"url":"https://github.com/sergionoivak/ng-ghosts-loading","last_synced_at":"2025-06-22T18:03:34.433Z","repository":{"id":101851276,"uuid":"252168185","full_name":"SergioNoivak/ng-ghosts-loading","owner":"SergioNoivak","description":"ng-ghosts-loading is a graphical interface library that you can generate phantom or skeleton components for an angular application, an objective as simple as using ng-ghosts-loading.","archived":false,"fork":false,"pushed_at":"2020-04-03T18:37:18.000Z","size":1170,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-22T18:02:03.922Z","etag":null,"topics":["angular","angular-library","angular-skeleton","ghost","ghost-loading","ghosts","ghosts-node","ghosts-ui","loading","loading-animations","loading-screen","phantom","phantom-angular","skeleton","skeleton-ghosts","skeleton-loading","ui-components","ui-design","ui-library","ui-load"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-git-calendar","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/SergioNoivak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-01T12:26:11.000Z","updated_at":"2024-03-20T16:38:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"3edb4688-ab59-4768-a34c-4aa76c3181af","html_url":"https://github.com/SergioNoivak/ng-ghosts-loading","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SergioNoivak/ng-ghosts-loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-ghosts-loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-ghosts-loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-ghosts-loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-ghosts-loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SergioNoivak","download_url":"https://codeload.github.com/SergioNoivak/ng-ghosts-loading/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioNoivak%2Fng-ghosts-loading/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261338955,"owners_count":23143891,"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":["angular","angular-library","angular-skeleton","ghost","ghost-loading","ghosts","ghosts-node","ghosts-ui","loading","loading-animations","loading-screen","phantom","phantom-angular","skeleton","skeleton-ghosts","skeleton-loading","ui-components","ui-design","ui-library","ui-load"],"created_at":"2024-11-07T05:12:03.694Z","updated_at":"2025-06-22T18:03:29.405Z","avatar_url":"https://github.com/SergioNoivak.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-ghosts-loading\n\nng-ghosts-loading is a graphical interface library that you can generate phantom or skeleton components for an angular application, an objective as simple as using ng-ghosts-loading. :smile:\n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f2.gif)\n\n\n\n## Getting started\n\nng-ghosts-loading it is an easy way to build page loading elements that make the user more calm.  And ng-ghosts-loading also soothes the angular application developer, because it saves work on developing CSS code with complex animations. \n\n## Install\n\nyou can download ng-ghosts-loading via npm: \n\n````\nnpm i ng-ghosts-loading\n````\n\nOr you can download the zip file from the github repository   🐙 :\n\nhttps://github.com/SergioNoivak/ng-ghosts-loading\n\n\n\n### Import to your application\n\nIn the general module ``app.module.ts`` of your application you must import ``NgGhostsLoadingModule`` into your angular application.\n\n````ts\n\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\n    // add here\n\nimport { NgGhostsLoadingModule} from 'projects/ng-ghosts-loading/src/public-api';\n\n//app.module.ts\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n\n    // and add here\n    NgGhostsLoadingModule\n\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n````\n\n\n\n## The `ghost-loading` tag\n\nThe `ghost-loading` tag is the basic loading container that the framework works.a basic example of using the tag is the creation of a phantom square, as below: \n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f3.gif)\n\nThe html code is very simple, as shown below: \n\n````html\n\u003c!-- app.component.html --\u003e\n\n\u003cghost-loading [width] = \"100\" [height] = \"100\"   \u003e\n\u003c/ghost-loading\u003e\n````\n\nWhen creating a tag `ghost-loading`, it must have the attributes ``height`` and ``width``, which must be passed in pixels. \n\n### circular ghost tag\n\nYou can create a circular ghost tag by adding the circular property. As below:\n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f4.gif)\n\n````html\n\u003c!-- app.component.html --\u003e\n\n\u003cghost-loading [width] = \"100\" [height] = \"100\" circle=\"true\"  \u003e\n\u003c/ghost-loading\u003e\n\n````\n\n\n\n### Adding child tags to `ghost-loading`\n\nOnly with the `ghost-loading` tag is it not possible to create complex styles, so to develop complex styles it is possible to have children of` ghost-loading` that will automatically be ghosts. The entire style application will still be preserved for your children from ``ghost-loading``:\n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f5.gif)\n\n````html\n\n\u003c!-- app.component.html --\u003e\n\u003cdiv class=\"center\"\u003e\n  \u003cghost-loading [width] = \"100\" [height] = \"100\" circle=\"true\"  \u003e\n    \u003cimg width=\"100\" height=\"100\" style=\"border-radius: 50%;\" src=\"./image.png\" alt=\"\" class=\"\"\u003e\n  \u003c/ghost-loading\u003e\n\u003c/div\u003e\n\n````\n\nin this example the image will also be applied by ghosts because it is a ``child of ghost-loading`` tag\n\n### ``delay`` property\n\nThe delay property of ghost-loading allows tags to have different ghosts animations. If no delay value is provided, the ghost component will assume 1.5 seconds of animation, but it is possible to provide the delay property with a value in seconds, as follows:\n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f6.gif)\n\n````html\n\n\u003c!-- app.component.html --\u003e\n\n  \u003cghost-loading [width] = \"100\" [height] = \"10\"   \u003e\n  \u003c/ghost-loading\u003e\n\n  \u003cghost-loading [delay]=\"2.0\" [width] = \"100\" [height] = \"10\"   \u003e\n  \u003c/ghost-loading\u003e\n\n````\n\nIt is observed that the two ghosts elements are not synchronized, this is due to the delay property. \n\n\n\n\n\n## Example 1 : Dog contact ghost\n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f8.gif)\n\nIn this example we are going to create a loading page with a photo of a beautiful dog with four ghost lines. The ghostly style is applied to the dog's photo because he is the son of the tag ``ghost-loading`` .Please note below:\n\n````html\n\n \u003cghost-loading [width]= \"200\"  [height]= \"200\" [circle]=\"true\"\u003e\n          \u003cimg style=\"border-radius: 50%;\" width=\"200\" height=\"200\" [src]=\"imgSrc\" alt=\"\" class=\"\"\u003e\n \u003c/ghost-loading\u003e\n\n   \u003cdiv style=\"margin-top: 10px;\"\u003e\n    \u003cghost-loading [width]= \"200\"  [height]= \"10\" \u003e\u003c/ghost-loading\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"margin-top: 10px;\"\u003e\n    \u003cghost-loading [width]= \"200\"  [height]= \"10\" \u003e\u003c/ghost-loading\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"margin-top: 10px;\"\u003e\n    \u003cghost-loading [width]= \"200\"  [height]= \"10\" \u003e\u003c/ghost-loading\u003e\n  \u003c/div\u003e\n  \u003cdiv style=\"margin-top: 10px;\"\u003e\n    \u003cghost-loading [width]= \"200\"  [height]= \"10\" \u003e\u003c/ghost-loading\u003e\n  \u003c/div\u003e\n\n\n````\n\n\n\n## Example 2 : friend's list\n\n![Image](https://github.com/SergioNoivak/ng-ghosts-loading/blob/master/src/photos/f7.gif)\n\nIn this example we are going to create a list of ghost friends, which can be used on a social network, for example. The vector ``[1,2,3,4,5]`` can be created in the component, but it is not the objective here, the example demonstrates how ghosts can be combined in a list to create complex elements, like a list of friends in a network Social.\n\n````html\n\n\u003c!-- app.component.html --\u003e\n\n  \u003cdiv *ngFor=\"let item of [1,2,3,4,5]\" style=\"margin-bottom: 5px;\" \u003e\n    \u003cghost-loading [width] = \"300\" [height] = \"50\"   \u003e\n      \u003cdiv style=\"display: flex;\"\u003e\n        \u003cghost-loading [delay]='2.0' [width] = \"45\" [height] = \"45\" [circle]=\"true\" \u003e\u003c/ghost-loading\u003e\n        \u003cdiv style=\"flex-direction: column; \"\u003e\n          \u003cdiv *ngFor=\"let x of [1,2,3]\" style=\"margin-bottom: 5px; margin-left: 10px; \"\u003e\n          \u003cghost-loading   [delay]='2.0' [width] = \"240\" [height] = \"8\" \u003e\u003c/ghost-loading\u003e\n        \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/ghost-loading\u003e\n\n  \u003c/div\u003e\n````\n\nIn this example, asynchronicity is guaranteed thanks to the ``delay`` attribute. As the external delay for the root node ``ghost-loading`` was not informed, a delay of 1.5 seconds is assumed for this. For the other ghosts elements, there is an informed ``delay`` property equal to 2.0 seconds\n\n\n\n## Tag attributes\n\nList of possible attributes of a ghost-loading: \n\n\u003cul\u003e\n    \u003cli\u003e\u003cb\u003ewidth\u003c/b\u003e: \nrepresents the width of a ghost, and must be expressed as an integer in pixel values.\u003c/li\u003e\n    \t\u003cli\u003e\u003cb\u003eheight\u003c/b\u003e:\nrepresents the height of a ghost, and must be expressed as an integer in pixel values.\u003c/li\u003e\n\t\u003cli\u003e\u003cb\u003edelay\u003c/b\u003e:\nRepresents the delay / duration in the animation of the ghost.\n    \u003c/li\u003e\n    \u003cli\u003e\u003cb\u003ecircle\u003c/b\u003e:\nBoolean attribute that indicates whether the ghost is a circle.\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n# Contact me \n\n@serginhosnovak@hotmail.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergionoivak%2Fng-ghosts-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergionoivak%2Fng-ghosts-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergionoivak%2Fng-ghosts-loading/lists"}