Fact Loader

A customizable loading screen that displays random facts to keep users entertained while they wait.

Features

✨ Multiple loader animations (spin, pulse, bounce, ripple)
🎨 Various loader types (standard, 3D cube, ripple, dots, skeleton, image)
🌈 Customizable colors (blue, red, green, purple, orange)
📊 Progress bar with real API progress support
📚 Random facts that change at configurable intervals
🖼️ Support for custom images
🌐 Full-screen overlay mode
♿ Accessibility features

Installation

npm install fact-loader

Quick Start

Import the module in your app:

import { FactLoaderModule } from "fact-loader";

@NgModule({
  imports: [
    // ...
    FactLoaderModule,
  ],
})
export class AppModule {}

Use it in your component template:

<lib-fact-loader [isLoading]="true" [loaderType]="'standard'" [loaderStyle]="'spin'" [loaderColor]="'blue'" [topicCategory]="'science'"> </lib-fact-loader>

That's it! You now have a working fact loader in your app.

Examples

Basic Usage

<lib-fact-loader [isLoading]="isLoading"></lib-fact-loader>

Custom Loader Type

<lib-fact-loader [isLoading]="isLoading" [loaderType]="'3d-cube'" [loaderColor]="'purple'"> </lib-fact-loader>

Custom Image

<lib-fact-loader [isLoading]="isLoading" [loaderType]="'image'" [imageUrl]="'assets/loading-icon.png'" [imageSize]="100" [loaderStyle]="'pulse'"> </lib-fact-loader>

Full-screen Overlay

<lib-fact-loader [isLoading]="isLoading" [fullscreenOverlay]="true" [overlayColor]="'rgba(0, 0, 50, 0.7)'"> </lib-fact-loader>

API Reference

Inputs

Input	Type	Default	Description
`isLoading`	boolean	true	Controls whether the loader is visible
`topicCategory`	string	'science'	Category of facts to display
`loaderType`	string	'standard'	Type of loader animation ('standard', '3d-cube', 'ripple', 'dots', 'skeleton', 'image')
`loaderStyle`	string	'spin'	Animation style ('spin', 'pulse', 'bounce', 'ripple')
`loaderColor`	string	'blue'	Color of the loader ('blue', 'red', 'green', 'purple', 'orange')
`factInterval`	number	4000	Time between fact changes (ms)
`simulateProgress`	boolean	false	Automatically simulate progress
`progress`	number	0	Current progress (0-100)
`showProgress`	boolean	true	Show/hide progress bar
`showBackground`	boolean	true	Show/hide background overlay
`fullscreenOverlay`	boolean	false	Enable full-screen overlay mode
`overlayColor`	string	'rgba(0, 0, 0, 0.5)'	Color of the overlay background
`overlayBlur`	boolean	false	Enable backdrop blur effect
`blurAmount`	string	'5px'	Amount of blur when overlayBlur is true
`imageUrl`	string	''	URL for custom image (when loaderType is 'image')
`imageSize`	number	80	Size of custom image in pixels
`ariaLabel`	string	'Loading content, please wait'	Accessibility label for the loader
`announceFactChanges`	boolean	true	Announce fact changes to screen readers
`focusAfterComplete`	string	''	ID of element to focus after loading completes

Outputs

Output	Type	Description
`loadingComplete`	EventEmitter<void>	Emitted when loading is complete

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Detalhes do pacote

fact-loader

readme (leia-me)