0.0.2 • Published 4 months ago
fact-loader v0.0.2
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-loaderQuick 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 | 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.