You are currently viewing How to Add Loading Spinner Using HTML,CSS and JavaScript?

How to Add Loading Spinner Using HTML,CSS and JavaScript?

Telegram Group Join Now

Hey Guys, In Today’s Blog We are going to see How to Create and Add a Loading Spinner Using HTML, CSS, and JavaScript. this is Infinity Loading Spinner so you Can Adjust Yourself and Add Using JavaScript. For that, the respective source codes were given below along with the respective preview of the output section. So you can make use of that.

Code by HexR
Project Download Link Available Below
Language used HTML , CSS and JavaScript
External link / Dependencies Yes
Responsive Yes
Loading Spinner Table

How to Create Loading Spinner Using JavaScript

Add Loading Spinner Using HTML,CSS and JavaScript

Now The Project is going to create and for that, we are first adding an HTML Code.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

HTML CODE:

<div id="spinner"></div>

Here a single line of HTML code is enough to add an spin loader. Simply a div class with name on it.

Now we are adding background using CSS.

CSS CODE:

html,body {
  margin:0;
  background:rgba(0,0,0,0.9)
}

Calling out HTML and BODY we are fixing the margin value to zero and background using RGBA Property. Now for adding loading spin to explore load animation we are using Java Script.

JavaScript Code:

but 1st add this cdn link to your project as in the script tag of javascript

https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js

Now add this js code to your js file

let opts = {
 lines: 13,
 length: 28,
 width: 14,
 radius: 42,
 scale: 1,
 corners: 1,
 color: '#FFF',
 opacity: 0.25,
 rotate: 0,
 direction: 1,
 speed: 1,
 trail: 60,
 fps: 20,
 zIndex: 2e9,
 className: 'spinner',
 top: '50%',
 left: '50%',
 shadow: false,
 hwaccel: false,
 position: 'absolute',
},
 target = document.getElementById('spinner'),
 spinner = new Spinner(opts).spin(target);

In this JavaScript code , First we are creating an variable with target and getting the ID using get element by id property. Then again we creating an variable spinner and adding new spinner object and passing a OPTS variable that contains values for making load spin and the spin(target) is called out.

Weather App Using Html,Css And Javascript (Weather App Source Code )

The values like length , width , height , color, rotate etc… is added to complete the load spin.

Now We have completed our Project successfully By adding source codes. So we can move for project preview in the given Output section.

FINAL OUTPUT:

Now We have Successfully created our Loading Spinner Using HTML , CSS and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Hexr

WRITTEN BY – Ragunathan

Which code editor do you use for this Loading Spinner coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

Yes!

Telegram Group Join Now

Leave a Reply