Engage Your Users with a CSS Animated Pencil Loader: Step-by-Step Tutorial
Step-by-Step Tutorial for Designing a CSS Animated Pencil Loader
Introduction
In today’s digital age, user experience is paramount. Loading animations are not only functional but also an opportunity to delight users while they wait. In this tutorial, we’ll dive into creating an eye-catching animated pencil loader using HTML and CSS. This project, part of Day 31 of the #100DaysOfCode Challenge, will not only enhance your coding skills but also add a charming touch to your web projects.
Step 1: Setting Up the HTML Structure
Begin by defining the basic HTML structure of our document. We’ll create a simple HTML file and include necessary meta tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Animated Pencil Loader</title>
</head>
<body>
<!-- Loader elements will be added here -->
</body>
</html>Step 2: Styling the Loader with CSS
Next, let’s style our loader using CSS. We’ll create a stylesheet named style.css and define the appearance and animation of each element.
/* CSS code goes here */
/* Importing Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap");
/* Styling for the body element */
body {
/* Set font family */
font-family: "Poppins", sans-serif;
/* Use flexbox layout */
display: flex;
/* Arrange children in a column */
flex-direction: column;
/* Center items horizontally */
align-items: center;
/* Center items vertically */
justify-content: center;
/* Set minimum height to full viewport height */
min-height: 100vh;
/* Set background gradient */
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
/* Set text color */
color: #20a6ff;
/* Set font size */
font-size: 1.5rem;
}Step 3: Creating the Pencil Loader
Now, let’s add the necessary HTML elements for our animated pencil loader inside the body tag.
<body>
<div class="pencil">
<div class="pencil__ball-point"></div>
<div class="pencil__cap"></div>
<div class="pencil__cap-base"></div>
<div class="pencil__middle"></div>
<div class="pencil__eraser"></div>
</div>
<div class="line"></div>
<h2>Page Loading...Please Wait</h2>
</body>Step 4: Styling the Pencil Loader
Let’s style each component of the pencil loader using CSS. This includes defining shapes, colors, positions, and animations.
/* Styling for the pencil element */
.pencil {
/* Set position to relative */
position: relative;
/* Set width */
width: 300px;
/* Set height */
height: 40px;
/* Set transform-origin to center */
transform-origin: center;
/* Rotate the pencil */
transform: rotate(135deg);
/* Apply animation */
animation: pencil-animation 10s infinite;
}
/* Styling for the pencil ball point */
.pencil__ball-point {
/* Set position to absolute */
position: absolute;
/* Align to left */
left: 0;
/* Align to vertical center */
top: 50%;
/* Adjust vertical position */
transform: translateY(-50%);
/* Set background color */
background: #026ef3;
/* Set height */
height: 10px;
/* Set width */
width: 10px;
/* Apply border-radius */
border-radius: 50px;
}
/* Styling for the pencil cap */
.pencil__cap {
/* Set position to absolute */
position: absolute;
/* Align to left */
left: 0px;
/* Align to vertical center */
top: 50%;
/* Adjust vertical position */
transform: translateY(-50%);
/* Clip path for cap shape */
clip-path: polygon(20% 40%, 100% 0%, 100% 100%, 20% 60%);
/* Set background color */
background: #232123;
/* Set width */
width: 12%;
/* Set height */
height: 100%;
}
/* Styling for the pencil cap base */
.pencil__cap-base {
/* Set position to absolute */
position: absolute;
/* Align to left */
left: 12%;
/* Align to top */
top: 0;
/* Set height */
height: 100%;
/* Set width */
width: 20px;
/* Set background color */
background: #232123;
}
/* Styling for the pencil middle part */
.pencil__middle {
/* Set position to absolute */
position: absolute;
/* Calculate left position */
left: calc(12% + 20px);
/* Align to top */
top: 0;
/* Set height */
height: 100%;
/* Set width */
width: 70%;
/* Set background color */
background: #0958c4;
}
.pencil__middle::before {
/* Add content before the element */
content: "withaarzoo";
/* Set font size */
font-size: 0.9rem;
/* Add padding to the left */
padding-left: 2rem;
}
/* Styling for the pencil eraser */
.pencil__eraser {
/* Set position to absolute */
position: absolute;
/* Calculate left position */
left: calc(12% + 70% + 20px);
/* Align to top */
top: 0;
/* Set height */
height: 100%;
/* Set width */
width: 11%;
/* Apply border-radius */
border-top-right-radius: 5px;
/* Apply border-radius */
border-bottom-right-radius: 5px;
/* Set background color */
background: #232123;
}
/* Styling for the line element */
.line {
/* Set position to relative */
position: relative;
/* Move down from the top */
top: 80px;
/* Move right from the right */
right: 103px;
/* Set height */
height: 10px;
/* Set width */
width: 1000px;
/* Set z-index */
z-index: -1;
/* Apply border-radius */
border-radius: 50px;
/* Set background color */
background: #026ef3;
/* Set initial scale */
transform: scaleX(0);
/* Set transform-origin to center */
transform-origin: center;
/* Apply animation */
animation: line-animation 10s infinite;
}
/* Styling for h2 elements */
h2 {
/* Set position to relative */
position: relative;
/* Move down from the top */
top: 150px;
/* Move right from the right */
right: 75px;
}Step 5: Adding Animation
Lastly, we’ll add keyframe animations to bring our loader to life. These animations will create the illusion of the pencil writing and the loading bar progressing.
/* Keyframes for pencil animation */
@keyframes pencil-animation {
0% {
transform: rotate(135deg);
}
20% {
transform: rotate(315deg);
}
45% {
transform: translateX(300px) rotate(315deg);
}
55% {
transform: translateX(300px) rotate(495deg);
}
100% {
transform: rotate(495deg);
}
}
/* Keyframes for line animation */
@keyframes line-animation {
20% {
transform: scaleX(0);
}
45% {
transform: scaleX(0.6);
}
55% {
transform: scaleX(0.6);
}
100% {
transform: scaleX(0);
}
}Conclusion
Congratulations! You’ve successfully created an engaging animated pencil loader using HTML and CSS. This project not only enhances your coding skills but also adds flair to your web projects. Stay tuned for more exciting coding challenges and tutorials as part of the #100DaysOfCode Challenge.
Download the Full Source Code
You can download the full source code from here.
Connect with Me
If you have any questions or suggestions, feel free to reach out to me on Bento. Let’s keep coding and learning together!
