ngneat / Content Loader
Licence: mit
⚪️ SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 655
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Content Loader
Pure64
Pure64 is a software loader that was initially created for BareMetal OS. The loader sets the computer into a full 64-bit state with no legacy compatibility layers and also enables all available CPU Cores in the computer.
Stars: ✭ 466 (-28.85%)
Mutual labels: loader
React Native Svg Transformer
Import SVG files in your React Native project the same way that you would in a Web application.
Stars: ✭ 568 (-13.28%)
Mutual labels: loader
Ngx Ui Loader
Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+
Stars: ✭ 368 (-43.82%)
Mutual labels: loader
Yaspin
A lightweight terminal spinner for Python with safe pipes and redirects 🎁
Stars: ✭ 413 (-36.95%)
Mutual labels: loader
Fuse Box
A blazing fast js bundler/loader with a comprehensive API 🔥
Stars: ✭ 4,055 (+519.08%)
Mutual labels: loader
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (-25.19%)
Mutual labels: loader
React Loader Spinner
Collection set of react-spinner for async operation
Stars: ✭ 378 (-42.29%)
Mutual labels: loader
Skeleton
💀 An easy way to create sliding CAGradientLayer animations! Works great for creating skeleton screens for loading content.
Stars: ✭ 587 (-10.38%)
Mutual labels: loader
Inject Loader
💉📦 A Webpack loader for injecting code into modules via their dependencies.
Stars: ✭ 474 (-27.63%)
Mutual labels: loader
Vboxhardenedloader
VirtualBox VM detection mitigation loader
Stars: ✭ 641 (-2.14%)
Mutual labels: loader
Front End Daily Challenges
As of October 2020, 170+ works have been accomplished, challenge yourself each day!
Stars: ✭ 598 (-8.7%)
Mutual labels: loader
React Imported Component
✂️📦Bundler-independent solution for SSR-friendly code-splitting
Stars: ✭ 525 (-19.85%)
Mutual labels: loader
Angular Content Loader
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.
Features
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;
Install
Yarn
yarn add @ngneat/content-loader
Usage
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 propertybaseUrlbelow to fix this issue.
Examples
Facebook Style
<facebook-content-loader></facebook-content-loader>
List Style
<list-content-loader></list-content-loader>
Bullet list Style
<bullet-list-content-loader></bullet-list-content-loader>
API
@Inputs
Prop name and type |
Environment | Description |
|---|---|---|
animate?: boolean Defaults to true
|
- | Opt-out of animations with false
|
baseUrl?: stringDefaults 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 {}
|
- |
Credits
This is basically an Angular port for react-content-loader.
License
MIT © NetanelBasal
Contributors ✨
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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].