
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.