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

1. Import the module in your app:

import { FactLoaderModule } from "fact-loader";

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

2. 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 | 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.