Skip to main content

Simple Preloader Design For Websites | Rustcode

by Rustcode
Simple-Preloader-Css-Loader-Spinner-For-Website-HTML-And-CSS

"Simple Preloader For Website" is a normal loader animation. This loader is used in a lot of websites. You can check out "three dot loader" which is also a popular loader.

Simple preloader is design using html and css. You can see in the image how it looks like. This loader animation has very small and the easiest code. So let see how it works.

 For more web development animation you can follow our other articles.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Simple Preloader Animation | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<body>

 <div></div>

</body>


03. css

body{
  background-color: #ff3300;
  text-align: center;
}
div{
  margin: auto;
  margin-top: 240px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 12px solid white;
  border-top: 12px solid #0066ff;
  animation: rotation 1s ease-in-out infinite;
}



04. Animation CSS

@keyframes rotation {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment