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
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!