spinner – CodingNepal

Create Loading Spinner in HTML & CSS

CodingNepal — Thu, 24 Nov 2022 21:11:21 +0000

https://www.codingnepalweb.com/wp-content/uploads/2022/11/Create20Loading20Spinner20in20HTML20amp20CSS.jpg

When you click on someone’s website or application, you may have seen the loader spinner. If you are looking for a quick and easy way to create a Loading Spinner then this blog is written for you.

This blog will teach you how to create a Loading Spinner using HTML and CSS only. Loader Spinners are used in many applications and websites. Usually, this kind of animation appears when a web page is loading. In my recent blog post, I have provided more than 16 Login & Registration From Templates which could be helpful for you.

Loading spinners are used when retrieving data or performing slow computations. They notify the user that their request is being processed. To keep your visitors and content watchers engaged while the page’s content loads, you may utilize loaders.

Have a look at the given image of the Loading Spinner. As you can see on the Loading Spinner, there is one plain color background and one spinner. This loader rotates 360 degrees indefinitely and smoothly.

I have explained all the HTML and CSS code that I have used to create this CSS Loading Spinner also if you want to make this CSS Loader with me step by step, then you can watch the video tutorial that I have given below.

Create a Loading Spinner in HTML & CSS | Video tutorial

All of the HTML and CSS code that I used to create this hover animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Navigation Menu Hover Animation. By watching the video tutorial, you can create this Navigation Menu Hover Animation.

As you have seen in the video tutorial of this Loading Spinner. This type of loading is much more attractive and enhances user satisfaction.

I hope now you can create this Loading Spinner in HTML and CSS. If you want to take all the HTML and CSS code I have used to create this CSS Loader then all the source codes are given below.

Loading Spinner in HTML CSS [Source Codes]

To create CSS Loader Spinner, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Loading Spinner by clicking on the given download button.

First, paste the following codes into your index.html file.





  
  
  
   Loading Spinner | CoderGirl

Second, paste the following codes into your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.container{

  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4285f4;
}
.spinner{
  width: 80px;
  height: 80px;
  border: 7px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner 0.7s linear infinite;
}
@keyframes spinner{
  from{}
    to{
      transform: rotate(360deg);
    }
}

That’s all, now you’ve successfully created a project on CSS Loading Spinner. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Create Circular Progress Bar in HTML CSS & JavaScript

CodingNepal — Wed, 15 Jun 2022 21:11:20 +0000

Hello friend, I hope you are doing and creating well. Today you are going to learn to create a Circular Progress Bar in HTML CSS & JavaScript only, I will not any SVG code. There are lots of Progress Bar I have created that are horizontally progressed. Today’s progress will be circular and it will also show the percentage that it has progressed.

Circular Progress Bar is the animation of a progressing bar in a circular motion and it is used to display information like skills in some field, knowledge, and as like this. You may have seen the circular progress bar on someone’s portfolio website, where they display the ability of something that they have in the percentage value.

Have a quick look at the given image of our project [Animated Circular Progress], on the webpage. As you have seen the bluish-purple color circle is not fully closed and inside it, the value of the circle or that shape has displayed. Actually when you refreshed the webpage that will start to progress from 0 and stops at 90%. Bottom of the circular progress bar there is the text “HTML & CSS”, For example, we can understand it, the knowledge of HTML & CSS is 90%

You can watch the real demo of this project [Animated Circular Progress], by watching the video tutorial that I have given below, and of course, you will also get the idea, of how HTM and CSS code work behind this circular progressing bar.

Create Circular Progress Bar | Skills Bar | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Circular Progress Bar, before getting into the source code file, I would like to briefly explain the video tutorial.

As you have seen in the video tutorial of our project [Animated Circular Progress Bar] when I refreshed the webpage the circle and the percentage value, started to progress from zero. As you have seen in the video, to create all the circular progressing bars I used only HTML and CSS, I did not use any SVG code, and to animate it I used some JavaScript code.

I believe, that now you can build this project [Circular Progress Bar], by using HTML CSS, and JavaScript. If you are feeling difficulty building it. I have provided all the source code files below.

Circular Progress [Source Code]

To get the following HTML CSS and JavaScript code for the Circular Progress, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.



    
    
        
        
        
         Circular Progress Bar 

        
        
                                        
    
    
        
            
                0%
            

            HTML & CSS

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7d2ae8;
}
.container{
    display: flex;
    width: 420px;
    padding: 50px 0;
    border-radius: 8px;
    background: #fff;
    row-gap: 30px;
    flex-direction: column;
    align-items: center;
}
.circular-progress{
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 210px;
    width: 210px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 40px;
    font-weight: 600;
    color: #7d2ae8;
}
.text{
    font-size: 30px;
    font-weight: 500;
    color: #606060;
}

 let circularProgress = document.querySelector(".circular-progress"),
    progressValue = document.querySelector(".progress-value");

let progressStartValue = 0,    
    progressEndValue = 90,    
    speed = 100;
    
let progress = setInterval(() => {
    progressStartValue++;

    progressValue.textContent = `${progressStartValue}%`
    circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`

    if(progressStartValue == progressEndValue){
        clearInterval(progress);
    }    
}, speed);