HomeCSSPaint Roller Loader CSS

Paint Roller Loader CSS

Hi everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a paint roller loader. To build this loading animation views HTML and CSS. This is a beginner-friendly CSS tutorial. I would highly recommend beginners try this tutorial.
 
Loading animations are important to keep the user entertained while the page loads. Hence a website needs to have a captivating loader. Let us create one such captivating loader in today’s tutorial.
 
If you are interested in more such tutorials, you can check out this playlist here. This playlist consists of a bunch of loading animation tutorials. I have created these animations with HTML and pure CSS. Not only are these tutorials easy to make they also help you improve your CSS skills.
 

Video Tutorial:

If you prefer to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my YouTube channel where I post new tutorials every alternate day. Along with this tutorial, I also post tips and tricks related to HTML CSS and JavaScript.

Project Folder Structure:

Before they start coding, let us take a look at the project folder structure. We create a project folder called paint roller loader. Inside this folder, we have to file these files index.html and style.css. The first file is the HTML document and the second file is the stylesheet.

HTML:

We begin with the HTML code. The HTML code consists of a div with a class name wrapper. The operative contains and centres all the other elements.

<!DOCTYPE html>
<html>
<head>
    <title>Paint Roller Loader</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:500&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
    <div class="container">
        <div class="roller">
            <div class="handle"></div>
        </div>
        <div class="paint"></div>
    </div>
    <a href="https://youtu.be/_ba8P-TS97k" target="_blank">My Youtube Channel</a>
</div>
</body>
</html>

CSS:

Next, we style elements that are created in HTML using CSS. Now you can go ahead and customise this loader the way you want.

body {
  background-color: #5f1760;
  padding: 0;
  margin: 0;
}
.wrapper {
  height: 420px;
  width: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.container {
  height: 350px;
  width: 350px;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
  left: 0;
}
.roller {
  height: 45px;
  width: 150px;
  border: 5px solid #040e15;
  border-radius: 7px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #ffca3e),
    color-stop(80%, #ffca3e),
    color-stop(80%, #fc8f2e)
  );
  background-image: -o-linear-gradient(
    top,
    #ffca3e 0,
    #ffca3e 80%,
    #fc8f2e 80%
  );
  background-image: linear-gradient(
    to bottom,
    #ffca3e 0,
    #ffca3e 80%,
    #fc8f2e 80%
  );
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  -webkit-animation: roller 2s infinite;
  animation: roller 2s infinite;
}
@-webkit-keyframes roller {
  40% {
    top: 165px;
  }
}
@keyframes roller {
  40% {
    top: 165px;
  }
}
.roller:before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.7);
  height: 7px;
  width: 75px;
  top: 8px;
  left: 8px;
  border-radius: 10px;
}
.roller:after {
  position: absolute;
  content: "";
  height: 40px;
  width: 85px;
  border: 7px solid #040e15;
  border-left: none;
  right: -20px;
  top: 20px;
  z-index: -1;
  border-radius: 7px;
}
.handle {
  height: 30px;
  width: 7px;
  background-color: #040e15;
  position: absolute;
  top: 68px;
  right: 65px;
}
.handle:after {
  position: absolute;
  content: "";
  height: 75px;
  width: 25px;
  background-color: #040e15;
  bottom: -75px;
  right: -8px;
  border-radius: 5px;
}
.paint {
  background-color: #ffca3e;
  height: 0;
  width: 130px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  z-index: -1;
  -webkit-animation: paint 2s infinite;
  animation: paint 2s infinite;
}
@-webkit-keyframes paint {
  40% {
    height: 165px;
  }
}
@keyframes paint {
  40% {
    height: 165px;
  }
}

That’s so sorry just a tutorial. If you face any issues while creating this code, you can download the source code by clicking on the download button below. Also if you have any queries, suggestions or feedback comment below.
Happy coding

Previous articleMCQ – 2/11/22
Next article3d Cube From 2D Image CSS
RELATED ARTICLES

1 COMMENT

  1. HI, awesome work!
    I wanted to contact because when you download the code it is downloaded two times, one when clicking the button and another when you close the modal ad.
    Maybe this raise hosting costs for you or something.

    Keep doing this awesome work!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

ten − 7 =

Most Popular

Dynamic color changer

Fruit Fall Game Javascript

Butterfly CSS Art