Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
ngx-skeleton-loader
Advanced tools
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
If you want to get more details about that, please read "NGX-Skeleton-Loader — States, Animations, Performance, and Accessibility for your Angular App" blog post
The idea of this component is make the process transparent and easier. So the main point is integrate this component with other tooling process, such as:
It's totally transparent for you and you can integrate easier in your application, improving your user experience 🎉
Try out our demos on Stackblitz!
You can get it on NPM installing ngx-skeleton-loader
module as a project dependency.
npm install ngx-skeleton-loader --save
You'll need to add NgxSkeletonLoaderModule
to your application module. So that, the <ngx-skeleton-loader>
components will be accessible in your application.
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...
@NgModule({
declarations: [
YourAppComponent
],
imports: [
...
NgxSkeletonLoaderModule,
...
],
providers: [],
bootstrap: [YourAppComponent]
})
export class YourAppComponent {}
After that, you can use the ngx-skeleton-loader
components in your templates, passing the configuration data into the component itself.
ngx-skeleton-loader
: Handle the skeleton animation and the skeleton styles of your app;<div class="item">
<ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader>
</div>
NgxSkeletonLoaderModule.forRoot()
Also, you can import the module in your app by calling NgxSkeletonLoaderModule.forRoot()
when adding it. So it will be available across your Angular application.
Importing the module this way also allows you to globally configure the default values for the ngx-skeleton-loader
components in your application, in case you need some different default values for your app.
...
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...
@NgModule({
declarations: [
YourAppComponent
],
imports: [
...
NgxSkeletonLoaderModule.forRoot({ animation: 'pulse', loadingText: 'This item is actually loading...' }),
...
],
providers: [],
bootstrap: [YourAppComponent]
})
export class YourAppComponent {}
<div class="item">
<ngx-skeleton-loader count="5" appearance="circle"></ngx-skeleton-loader>
<!-- above line will produce the rendering of 5 circles with the pulse animation and the aria-valuetext attribute set with "This item is actually loading..." -->
</div>
Loading...
: attribute that defines the text value for aria-valuetext
attribute. Defaults to "Loading..."aria-label
- default loading
: you can add ariaLabel
as input of the component to set a different value.You can also define which appearance want to use in your skeleton loader by passing the options in your component via [appearance]
attribute.
''
- default: it will use it ''
as appearance. At the end, it will render like a line;line
: it will render like a line. This is the same behavior as passing an empty string;circle
: it will use circle
as appearance. Great for avatar skeletons, for example :);You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via [animation]
attribute.
"false"
(as string): it will disable the animation;false
(as boolean): it will disable the animation. Animation will receive false
as string when attribute field it's not using binding. Component now can receive false
(boolean), "false" (string), or any other animation type via binding;progress
- default: it will use it progress
as animation;progress-dark
: it will use it progress-dark
as animation. Recommended if your color schema is darken;pulse
: it will use pulse
as animation;
progress
is the default animation, used as the single one previously. If you don't pass the animation attribute, it defaults toprogress
.
<!--
If you need to change all the background wrapper
you need to apply the style changes on the
`ngx-skeleton-loader` component wrapper
-->
<div class="item">
<!-- Disables the animation -->
<ngx-skeleton-loader animation="false"></ngx-skeleton-loader>
<!-- Disables the animation, but receiving boolean value from binding -->
<!-- Via binding it can receive `false` (boolean), "false" (string), or any other animation type -->
<ngx-skeleton-loader [animation]="classAttributeWithBooleanFalseValue"></ngx-skeleton-loader>
<!-- Uses `progress` as animation -->
<ngx-skeleton-loader animation="progress"></ngx-skeleton-loader>
<ngx-skeleton-loader></ngx-skeleton-loader>
<!-- Uses `pulse` as animation -->
<ngx-skeleton-loader animation="pulse"></ngx-skeleton-loader>
</div>
You can check the code details in the Stackblitz Live Demo Link
You can also define different styles for the skeleton loader by passing an object with the css styles - in dashed case - into the component via [theme]
attribute.
<!--
If you need to change all the background wrapper
you need to apply the style changes on the
`ngx-skeleton-loader` component wrapper
-->
<div style="background: #FF0001; padding: 10px;">
<ngx-skeleton-loader
count="5"
[theme]="{
'border-radius': '5px',
height: '50px',
'background-color': '#992929',
border: '1px solid white'
}"
></ngx-skeleton-loader>
</div>
The [theme] attribute now accepts the same configuration as ngStyle
as well. That means you can manage to use like you're doing with the built-in directive, having a pleasure and beautiful experience
<!--
Note that we are using a combination of styles and ngStyle inside theme object,
having `height.px` receiving a number and `background-color` receiving a HEX Color
-->
<div style="background: #FF0001; padding: 10px;">
<ngx-skeleton-loader
count="5"
[theme]="{
'height.px': 50,
'background-color': '#992929'
}"
></ngx-skeleton-loader>
</div>
Also, you can use CSS to add theme styles into your component. However, there are some implications:
:host
in your stylesheet, which means you are aware of any possible problem :host
can create for your app at that level since it's based on :host
DOM style scoping<ngx-skeleton-loader>
internal classes. It means that class naming changes on module's side will be breaking changes for your application as well.As an example, your Component file is like this
import { Component } from '@angular/core';
@Component({
selector: 'my-ngx-skeleton-loader-with-theming',
templateUrl: './my-ngx-skeleton-loader-with-theming.component.html',
styleUrls: ['./my-ngx-skeleton-loader-with-theming.component.css'],
})
export class MyNGXSkeletonLoaderWithThemingComponent {
/* ... code goes here*/
}
And your component HTML code is
<!--
file: my-ngx-skeleton-loader-with-theming.component.html
As an example, it's not using themes via [theme] attributes.
-->
<ngx-skeleton-loader count="5" animation="pulse"></ngx-skeleton-loader>
You can apply theme changes in our stylesheet. At the end it will be
/* file: `my-ngx-skeleton-loader-with-theming.component.css`
*
* You can find more details about `:host` at
* Angular Component Style Docs https://angular.io/guide/component-styles#host
*/
:host >>> ngx-skeleton-loader .loader {
border-radius: 5px;
height: 50px;
background-color: #992929;
border: 1px solid white;
}
You should change the styles on the skeleton wrapper element in case you need to change the background color. You can check the code details in the Stackblitz Live Demo Link or check it out a content load simulation in this Stackblitz Live Demo Link
npm start
and access the link http://localhost:4200
in your browsernpm test
for run tests. In case you want to test using watch, please use npm run tdd
this project is using np
package to publish, which makes things straightforward. EX: np <patch|minor|major> --contents=dist/ngx-skeleton-loader
For more details, please check np package on npmjs.com
For any type of contribution, please follow the instructions in CONTRIBUTING.md and read CODE_OF_CONDUCT.md files.
Wilson Mendes (willmendesneto)
[4.0.0][] - 2021-07-28
forRoot()
more than once if module is loaded asynchronously in a submodule.". Unfortunately, this was affecting consumers and it needed to be reverted to avoid friction in other applications.If you need to have this feature in place, the suggestion is to create a specific module in your app and apply the changes on your application.
FAQs
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
The npm package ngx-skeleton-loader receives a total of 93,425 weekly downloads. As such, ngx-skeleton-loader popularity was classified as popular.
We found that ngx-skeleton-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.