Angular component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.
This is an Angular port for react-content-loader.
- ⚙️ Completely customizable: you can change the colors, speed and sizes;
- ✏️ Create your own loading: use the create-react-content-loader to create your custom loadings easily;
- 👌 You can use right now: there are a lot of presets to use the loader, see the options;
- 🚀 Performance: uses pure SVG to work, so it works without any extra scripts, canvas, etc;
yarn add @ngneat/content-loader
import { ContentLoaderModule } from '@ngneat/content-loader';
@NgModule({
imports: [ContentLoaderModule]
})
export class AppModule {}
<content-loader>
<svg:rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<svg:rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
<svg:rect x="20" y="40" rx="3" ry="3" width="170" height="10" />
<svg:rect x="0" y="60" rx="3" ry="3" width="250" height="10" />
<svg:rect x="20" y="80" rx="3" ry="3" width="200" height="10" />
<svg:rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
</content-loader>
Warning: Safari renders the SVG in black in case your Angular application uses the
<base href="/" />
tag in the<head/>
of yourindex.html
. Refer to the input propertybaseUrl
below to fix this issue.
<facebook-content-loader></facebook-content-loader>
<list-content-loader></list-content-loader>
<bullet-list-content-loader></bullet-list-content-loader>
Prop name and type |
Environment | Description |
---|---|---|
animate?: boolean Defaults to true |
- | Opt-out of animations with false |
baseUrl?: string Defaults to an empty string |
- | Required if you're using <base url="/" /> document <head/> . This prop is common used as: <ContentLoader baseUrl={window.location.pathname} /> which will fill the SVG attribute with the relative path. Related #93. |
speed?: number Defaults to 1.2 |
- | Animation speed in seconds. |
interval?: number Defaults to 0.25 |
- | Interval of time between runs of the animation, as a fraction of the animation speed. |
viewBox?: string Defaults to undefined |
- | Use viewBox props to set a custom viewBox value, for more information about how to use it, read the article How to Scale SVG. |
gradientRatio?: number Defaults to 1.2 |
- | Width of the animated gradient as a fraction of the view box width. |
rtl?: boolean Defaults to false |
- | Content right-to-left. |
backgroundColor?: string Defaults to #f5f6f7 |
- | Used as background of animation. |
foregroundColor?: string Defaults to #eee |
- | Used as the foreground of animation. |
backgroundOpacity?: number Defaults to 1 |
- | Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
foregroundOpacity?: number Defaults to 1 |
- | Animation opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari |
style?: CSSProperties Defaults to {} |
- |
This is basically an Angular port for react-content-loader.
MIT © NetanelBasal
Thanks goes to these wonderful people (emoji key):
Netanel Basal 💻 🖋 📖 |
Heo 💻 |
Andreas Aeschlimann 📖 |
alexw10 💻 📖 |
Chinonso Chukwuogor 💻 |
wynfred 💻 |
Rustam 💻 |
Alex Malkevich 📖 |
Daniel Sogl 💻 🚧 📦 |
Alex Szabó 💻 |
Roy 📖 |
Robin Van den Broeck 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!