Introduction
Today we are making the page loading effect with block design and animation on block by using HTML and CSS. This loader will be fully animated and will be active until the user leaves the page. This is very useful, as you can make such a loader and put it on your webpage to load any page on your website, or you can do this for your practice.
Let’s start making this block loader with animation using HTML and CSS together. You just need to follow our code step by step to understand it without any problem, so you can make this loader by yourself later.
HTML
First, we will create the structure of the block loader with the help of HTML. In HTML, we will make a parent div in which we will make six sub divs to make the block for loading, on which animation will be applied.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated block loader | layakCoder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="box-wrap">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
</div>
</div>
</body>
</html>CSS
After making the structure of Loader by HTML, we will now give it styling and make it animated with the help of CSS (an external stylesheet attached to the HTML file). In CSS, first we will adjust the parent div and take it to the center of the screen by using the Position Absolute property. Then we will design the boxes, like giving background color, size, and border properties to all the boxes. We will also tilt the boxes right side with some angle using the transform property by giving a degree.
:root {
--w-size: 200px;
--w-margin: calc(-var(--w-size)/2);
--b-size: 70%;
--box-wrapper-width: var(--b-size);
--box-wrapper-height: var(--b-size);
--box-wrapper-margin: calc((100% - var(--box-wrapper-height))/2) calc((100% - var(--box-wrapper-width))/2);
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: black;
}
.wrapper {
position: absolute;
left: 50%;
top: 50%;
margin: var(--w-margin);
width: var(--w-size);
height: var(--w-size);
background-color: transparent;
border: none;
-webkit-user-select: none;
}
.box-wrap {
width: var(--box-wrapper-width);
height: var(--box-wrapper-height);
margin: var(--box-wrapper-margin);
position: relative;
transform: rotate(-45deg);
}
.box {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, #0ff81b, #f12d8c, #3700ff, #f84b00, #ff8a00, #ff00ff, #d14e8e, #ff0060, #d3f800, #09dee6);
background-position: 0% 50%;
background-size: 1000% 1000%;
visibility: hidden;
}
.box.one {
animation: moveGradient 15s infinite, oneMove 3.5s infinite;
}
.box.two {
animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
}
.box.three {
animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
}
.box.four {
animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
}
.box.five {
animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
}
.box.six {
animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
}
@keyframes moveGradient {
to {
background-position: 100% 50%;
}
}
@keyframes oneMove {
0%,
100% {
visibility: visible;
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
14.2857% {
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
28.5714% {
clip-path: inset(35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
42.8571% {
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
57.1428% {
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
71.4285% {
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
85.7142% {
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
100% {
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
}
@keyframes twoMove {
0%,
100% {
visibility: visible;
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
14.2857% {
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
28.5714% {
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
42.8571% {
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
57.1428% {
clip-path: inset(35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
71.4285% {
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
85.7142% {
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
100% {
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
}
@keyframes threeMove {
0%,
100% {
visibility: visible;
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
14.2857% {
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
28.5714% {
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
42.8571% {
clip-path: inset(0% 70% 70% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
57.1428% {
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
71.4285% {
clip-path: inset(0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
85.7142% {
clip-path: inset(35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
100% {
clip-path: inset(35% 70% 35% 0 round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
}
@keyframes fourMove {
0%,
100% {
visibility: visible;
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
14.2857% {
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
28.5714% {
clip-path: inset(35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
42.8571% {
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
57.1428% {
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
71.4285% {
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
85.7142% {
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
100% {
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
}
@keyframes fiveMove {
0%,
100% {
visibility: visible;
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
14.2857% {
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
28.5714% {
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
42.8571% {
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
57.1428% {
clip-path: inset(35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
71.4285% {
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
85.7142% {
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
100% {
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
}
@keyframes sixMove {
0%,
100% {
visibility: visible;
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
14.2857% {
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
28.5714% {
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
42.8571% {
clip-path: inset(70% 0 0 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
57.1428% {
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
71.4285% {
clip-path: inset(35% 0% 35% 70% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
85.7142% {
clip-path: inset(35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
100% {
clip-path: inset(70% 35% 0% 35% round 5%);
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
}Animation
In animation part we will add some animation to the loader to work like a real one using @keyframe a CSS property use to apply animation to the html page. In this we will make animation of moving the box continuously by changing the positions with timing and each box will change its position with some fixed interval of time also change gradient background color.
Finally we made the page loading effect with the help of HTML and CSS with animation by following the simple code step by step. If you want the source code then click on the download given below.
For more explanation click on the link to watch video.
Press the download button to download the source code
