Search

Angular 11 Spinner/Loader With Out Any Third Party Library/Package

In this article, we will learn how we can show the Loader in Angular 11 without using any third-party spinner. We are using CSS to build an animated Spinner.

Prerequisites

  • Basic Knowledge of Angular 2 or higher

  • Visual Studio Code

  • Node and NPM installed

  • Bootstrap


Step 1

Create an Angular project by using the following command

ng new Angularloader


Step 2

Open this project in Visual Studio Code and install bootstrap by using the following command

npm install bootstrap --save


Step 3

Jquery is needed to run bootstrap click events. So install jquery using below command

npm install jquery --save

Declare Jquery before bootstrap.

Otherwise, you will get the below error

Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

"scripts": [  
"node_modules/jquery/dist/jquery.js",  
"node_modules/bootstrap/dist/js/bootstrap.js"]

Now Bootstrap will work fine.