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.


  • 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": [  

Now Bootstrap will work fine.