D Spinner Library

Project Overview

The d-spinner library provides an Angular component for displaying customizable loading spinners. This library works with Angular versions 12 through 19 and offers an easy-to-integrate solution to show and hide loading spinners during your application's loading state.

Demo

Demo - Netlify

Demo - StackBlitz

Installation Guide

Follow the steps below to install and integrate the d-spinner library into your Angular project.

1. Install the Package

Use npm or yarn to install the package:

Using npm:

npm install d-spinner

Using yarn:

yarn add d-spinner

2. Import the Module

Once the package is installed, you need to import the DSpinnerModule into your Angular module.

In your app.module.ts, add the following:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DSpinnerModule } from 'd-spinner';  // Import the module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DSpinnerModule  // Add the module to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Add Spinner in HTML

In your component’s HTML file, you can include the spinner using the tag. You can also create a button to trigger the spinner. Example HTML:

<div>
  <button (click)="showSpinner()">Show Spinner</button>
  <button (click)="hideSpinner()">Hide Spinner</button>
    <div style="width: 250px; height: 250px; position: relative;border: 1px solid gray;">
      Content here
      <!-- Example of using the spinner component -->
      <d-spinner 
        card="card1" 
        loader="simple-spinner" 
        width="100" 
        thickness="4" 
        primaryColor="yellow" 
        secondaryColor="cyan" 
        transparencyColor="#91919136">
      </d-spinner>
    </div>
</div>

4. Control the Spinner in TypeScript

In your component’s TypeScript file, use the DSpinnerService to show or hide the spinner programmatically.

Example TypeScript:

import { Component } from '@angular/core';
import { DSpinnerService } from 'd-spinner';  // Import the service

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private spinner: DSpinnerService) {}

  // Method to show the spinner
  showSpinner() {
    this.spinner.show('card1');
  }

  // Method to hide the spinner
  hideSpinner() {
    this.spinner.hide('card1');
  }

}

Usage Guide

1. Spinner Configuration

The <d-spinner> component supports several input properties:

• card: The ID of the spinner configuration (e.g., 'card1').
• loader: The type of loader/spinner (e.g., 'simple-spinner').
• width: The width of the spinner (e.g., 100).
• thickness: The thickness of the spinner's outline (e.g. 4).
• primaryColor: The primary color of the spinner (e.g. '#000000').
• secondaryColor: The secondary color of the spinner (e.g. '#000000').
• transparencyColor: The transparency color of the spinner (e.g. 'rgba(0, 0, 0, 0.1)').

2. Default Parameter

By default, if no values are provided for the spinner’s configuration, the following parameters are used:

• width: 48 (Default width of the spinner).
• thickness: 3 (Default thickness of the spinner’s outline).
• primaryColor: '#FFFFFF' (Default primary color of the spinner).
• secondaryColor: '#0c7beb' (Default secondary color of the spinner).
• transparencyColor: 'rgba(0, 0, 0, 0.4)' (Default transparency color of the spinner).

3. Spinner Variants

The library provides various spinner variants that can be used by setting the loader property to any of the following values:

| Spinner Variant 1 | Spinner Variant 2 | Spinner Variant 3 | |---------------------------|---------------------------|---------------------------| | simple-spinner | inner-arc | outer-arc | | twin-inner-arc | twin-outer-arc | inner-orbiting-dot | | outer-orbiting-dot | inner-spiral | dual-segment | | dotted-circular | rotating-bar | ring | | square-wave | glowing-ring | half-ring | | intersecting-ring | balancing-shapes | rotating-slice | | inner-fill-arc | rolling-circle | orbiting-dots | | dual-pulsating-dots | expanding-dots | rotating-double-square | | scattered-diamond | pulsating-grid | expanding-square | | tilted-bar | bouncing-diamond | intersecting-triangle | | rotating-triangle | bouncing-square | spin-with-bounce | | circle-inside-square | vertical-bars-pulsation | flipping-parallel-lines | | rising-bars-with-dot | dashed-line-expansion | balancing-capsule | | loading-bounce | expanding-block | arc-of-dots | | rotating-pie-shape | circular-progress | bouncing-dots |

Note:
It is mandatory that the parent container of the spinner should have position: relative to ensure proper alignment and positioning of the spinner.

Version Compatibility

This library supports Angular versions 12 to 19. Make sure that your project is using one of these Angular versions.

License

This project is open source and available under the MIT License.

Troubleshooting

If you run into issues while using the spinner, follow these steps:

1. Ensure correct Angular version
   Make sure your project is running Angular 12 or higher.

2. Check dependencies
   Ensure that the package d-spinner is installed correctly via npm or yarn.

3. Verify imports
   Ensure the module is properly imported in your Angular AppModule.

Contact

If you have any questions or suggestions, please feel free to contact me at [email protected]