Loader – CodingNepal

Neumorphism Loading Spinner in HTML & CSS

CodingNepal — Wed, 01 Feb 2023 21:11:21 +0000

Building a Loading Spinner can improve HTML, CSS, and animation skills. Neumorphism UI enhances user experience by using light and shadow. Improving hierarchy and relationships between elements in the interface.

In this article, you will discover how to craft an attractive Loading Spinner utilizing Neumorphism UI with HTML and CSS. Even if you have no prior experience in HTML and CSS, you will be able to make this spinner with ease. Recently I have provided a blog on creating a Card Slider. I hope that will also be beneficial for you.

A loading spinner indicates page loading with animation. Neumorphism UI is a design style combining 3D elements and shadows for a subtle look with depth. “Neumorphism” is a term combining “new” and “skeuomorphism.”

Video Tutorial of Neumorphism Loading Spinner

If you would like to create this Neumorphism Loading Spinner step by step the full video tutorial is provided below. Otherwise, you may continue reading the blog.

Steps to create Loading Spinner in HTML & CSS

We will create this Neumorphims Loading Spinner in two steps using HTML and CSS.

1. File Structure

For starters, we will establish a new directory for our project. You can name it as you wish and within that directory, create two files named index.html and style.css. These files will hold the HTML and CSS code required for the Neumorphism Loading Spinner.

2. Creating the Neumorphism Loading Spinner

In the next step, we will design the layout and enhance the appearance of the spinner using HTML and CSS. To do this, add the following HTML code to your index.html file to establish the basic structure of the spinner.




  
    
    
    
    Neumorphism Loading Spinner

In your style.css file, add the following CSS code to style the loading spinner. If you want, you can change the font, size, color, and background of the loading spinner by slightly modifying this code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
}
.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 1),
    inset 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: -10px -10px 15px rgba(255, 255, 255, 1),
    10px 10px 10px rgba(0, 0, 0, 0.1);
}
span {
  height: 186px;
  width: 220px;
  position: absolute;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
span::before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 50%;
  width: 30px;
  background: linear-gradient(45deg, #336dff, #5c89ff);
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

By following the steps in this blog post, you’ve learned how to create a Neumorphism Loading Spinner in HTML and CSS.

If you encounter any problems or your code is not working as expected, you can download the source code files of this loading spinner by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

Animated Gradient Shiny Loader with HTML CSS & JavaScript

CodingNepal — Fri, 22 May 2020 08:12:00 +0000

Hello readers, Today in this blog you’ll learn how to create an Animated Gradient Shiny Loader or Preloader in HTML CSS & JavaScript. Earlier I have shared a Color Changing Shiny Loader using HTML & CSS only Now it’s time to create an Animated Gradient Loader with Percentage in JavaScript.

Preloaders are what you inspect on the screen while the rest of the page’s content is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

At first, this loader is in the initial stage, where there is a loader and 0% text or number at the center on the webpage. But when you click on that center text or number, the loader will be activated and it starts to rotates as well as the center percentage also starts to increase from 0% to 100%. When it completed 100%, the loader stops rotating.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Gradient Shiny Loader).

Video Tutorial of Gradient Preloader in JavaScript

If you’re a beginner you can create this type of loader or preloader for learning purposes. But if you know JavaScript you can use this loader in your websites, projects, anywhere you want.

If you like this program (Animated Gradient Shiny Loader) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

To create this program (Animated Gradient Shiny Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Gradient Ring or Loader
      
   
   
      
      
         0%

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

html,body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  background: #240f52;
  overflow: hidden;
}
.outer{
  height: 300px;
  width: 300px;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  border-radius: 50%;
}
.inner{
  position: absolute;
  width: 275px;
  height: 275px;
  text-align: center;
  line-height: 275px;
  background: #240f52;
  border-radius: 50%;
  cursor: default;
  /* opacity: 0; */
}
.inner span{
  font-size: 60px;
  font-weight: 800;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-size: 300%;
}
.outer.active-loader{
  animation: rotate 2s ease infinite;
}
@keyframes rotate {
  to{
    transform: rotate(360deg);
  }
}
.outer.active-loader-2{
  animation: rotate2 3s ease;
}
@keyframes rotate2 {
  to{
    transform: rotate(360deg);
  }
}

That’s all, now you’ve successfully created Animated Gradient Shiny Loader with HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Color Changing Shiny Loader using HTML & CSS

CodingNepal — Tue, 19 May 2020 09:06:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Color Changing Shiny Loader using only HTML & CSS. Previously I have shared a Star Rating Widget using HTML & CSS only. Now, it’s time to create a CSS Loader.

Preloaders (also known as loaders) are what you see on the webpage screen while the rest of the page contents is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

This loader rotates 360deg clockwise. In that meantime of rotating it changes their color to blue, orange, yellow, and green. That means when it completed rotates 90deg its color change blue to orange and when it completed rotates 180deg its color change from orange to yellow and when it completed rotates 360deg its color change from yellow to green. The center “loading…” text smoothly fade out and fades in when the loader is rotating.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Color Changing Shiny Loader).

Video Tutorial of Color Changing Shiny Loader

If you like this program (Color Changing Shiny Loader) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you want to create a beautifully designed website and keep visitors entertained while server operations finish processing., then use any loader. Peoples which are beginners in HTML CSS, this design will the best practice and example for him/her.

Preloader Design in HTML & CSS [Source Codes]

As always, before sharing the codes of this program (Color Changing Shiny Loader). Let’s a few talks about the main tags and codes of this program. In the HTML File, first I created a

with the class name “center” and placed all other tags inside it. Then I created another

with the class name “ring”. Inside

tag I created a tag.

In the CSS File, first I reset default margins and padding to 0; and put the background color black. Then I placed all elements at the center using CSS Flex property.

After placed elements at the center, I created a square box of height: 200px and width: 200px; Then I gave a border radius of 50%; to this square, to create a circle. And using :before pseudo-element, I created a duplicate layer of circle box of the same height-width. After that, I placed that loading… text at the center of the circle box. At last, I created an animation in the ring container and give the animation name. Then using @keyframe property I call this animation and rotates this ring 360deg clockwise. Inside @keyframe I gave that ring different colors at different degrees.

To create this program (Color Changing Shiny Loader). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Loading Animation
      
   
   
      
         
         loading...

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

body{
  margin: 0;
  padding: 0;
  font-family: montserrat;
  background: black;
}
.center{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.ring{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: ring 2s linear infinite;
}
@keyframes ring {
  0%{
    transform: rotate(0deg);
    box-shadow: 1px 5px 2px #e65c00;
  }
  50%{
    transform: rotate(180deg);
    box-shadow: 1px 5px 2px #18b201;
  }
  100%{
    transform: rotate(360deg);
    box-shadow: 1px 5px 2px #0456c8;
  }
}
.ring:before{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,255,255,.3);
}
span{
  color: #737373;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 200px;
  animation: text 3s ease-in-out infinite;
}
@keyframes text {
  50%{
    color: black;
  }
}

That’s all, now you’ve successfully created a Color Changing Shiny Loader using HTML & CSS. If your code not work or you’ve faced any errors/problems then please comment down or contact us from the contact page.