Deepak-spinner-test NPM

Deepak Spinner Test Library

Author: Deepak Mahajan

Project Overview

The Deepak Spinner Test 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

Installation Guide

Follow the steps below to install and integrate the Deepak Spinner Test library into your Angular project.

1. Install the Package

Use npm or yarn to install the package:

Using npm:

npm install deepak-spinner-test

Using yarn:

yarn add deepak-spinner-test

2. Import the Module

Once the package is installed, you need to import the DeepakSpinnerTestModule 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 { DeepakSpinnerTestModule } from 'deepak-spinner-test';  // Import the module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DeepakSpinnerTestModule  // 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;">
      Content here
      <!-- Example of using the spinner component -->
      <d-spinner 
        card="card3" 
        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 DeepakSpinnerTestService to show or hide the spinner programmatically.

Example TypeScript:

import { Component } from '@angular/core';
import { DeepakSpinnerTestService } from 'deepak-spinner-test';  // Import the service

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

  constructor(private spinner: DeepakSpinnerTestService) {}

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

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

}

Usage Guide

1. Spinner Configuration

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

card: The ID of the spinner configuration (e.g., 'card3').
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. 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:

Ensure correct Angular version
Make sure your project is running Angular 12 or higher.
Check dependencies
Ensure that the package deepak-spinner-test is installed correctly via npm or yarn.
Verify imports
Ensure the module is properly imported in your Angular AppModule.