https://github.com/sergionoivak/ng-ghosts-loading
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.
https://github.com/sergionoivak/ng-ghosts-loading
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
Last synced: 19 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/sergionoivak/ng-ghosts-loading
- Owner: SergioNoivak
- License: mit
- Created: 2020-04-01T12:26:11.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-03T18:37:18.000Z (about 5 years ago)
- Last Synced: 2025-03-25T10:51:14.402Z (about 1 month ago)
- 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
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-git-calendar
- Size: 1.12 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-ghosts-loading
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. :smile:
## Getting started
ng-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.
## Install
you can download ng-ghosts-loading via npm:
````
npm i ng-ghosts-loading
````
Or you can download the zip file from the github repository 🐙 :
https://github.com/SergioNoivak/ng-ghosts-loading
### Import to your application
In the general module ``app.module.ts`` of your application you must import ``NgGhostsLoadingModule`` into your angular application.
````ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// add here
import { NgGhostsLoadingModule} from 'projects/ng-ghosts-loading/src/public-api';
//app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
// and add here
NgGhostsLoadingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
````
## The `ghost-loading` tag
The `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:
The html code is very simple, as shown below:
````html
````
When creating a tag `ghost-loading`, it must have the attributes ``height`` and ``width``, which must be passed in pixels.
### circular ghost tag
You can create a circular ghost tag by adding the circular property. As below:
````html
````
### Adding child tags to `ghost-loading`
Only 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``:
````html
````
in this example the image will also be applied by ghosts because it is a ``child of ghost-loading`` tag
### ``delay`` property
The 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:
````html
````
It is observed that the two ghosts elements are not synchronized, this is due to the delay property.
## Example 1 : Dog contact ghost
In 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:
````html
![]()
````
## Example 2 : friend's list
In 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.
````html
````
In 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
## Tag attributes
List of possible attributes of a ghost-loading:
-
width:
represents the width of a ghost, and must be expressed as an integer in pixel values. -
height:
represents the height of a ghost, and must be expressed as an integer in pixel values. -
delay:
Represents the delay / duration in the animation of the ghost.
-
circle:
Boolean attribute that indicates whether the ghost is a circle.
# Contact me