# 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

<a href="https://stackblitz.com/~/github.com/deepakmahajan57/d-spinner" target="_blank">Demo</a>

## 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:
```bash
npm install deepak-spinner-test
```

#### Using yarn:
```bash
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:

```typescript
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 <d-spinner> tag. You can also create a button to trigger the spinner.
Example HTML:
```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:

```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:

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

2. **Check dependencies**  
   Ensure that the package **`deepak-spinner-test`** 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 [deepakmahajan57@gmail.com](mailto:deepakmahajan57@gmail.com)