Modern Web
Posted on May 20, 2021
Hello, glad you are here. I am kunaal and today we will make an awesome website loading animation. You can see demo below.
Demo
This is responsive login form. To see desktop effect click on 0.5 scale for mobile view click on 1 scale.
Video Tutorial -
If you find this article hard or for better explanation. You can watch video tutorial.
If you like the video tutorial. Please consider subscribing my youtube channel.
Let's code
Make two files index.html and style.css. Write basic HTML structure and link stylesheet.
After that inside body tag write this.
<div class="anim-container">
<div class="shutter top">
<div class="circle">
<div class="box" style="--rotateVal: 0deg"></div>
<div class="box" style="--rotateVal: 90deg"></div>
<div class="box" style="--rotateVal: 180deg"></div>
<div class="box" style="--rotateVal: 270deg"></div>
</div>
<div class="circle">
<div class="box" style="--rotateVal: 0deg"></div>
<div class="box" style="--rotateVal: 90deg"></div>
<div class="box" style="--rotateVal: 180deg"></div>
<div class="box" style="--rotateVal: 270deg"></div>
</div>
</div>
<div class="shutter bottom"></div>
</div>
You just made some div for our circular loading box and set different css variable values to the box element.
Now write this in style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--rotateVal: 0deg;
}
body{
width: 100%;
height: 100vh;
position: relative;
background: #111;
font-family: 'roboto', sans-serif;
}
.anim-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9;
pointer-events: none;
}
.shutter{
position: relative;
width: 100%;
height: 50%;
background: #000;
}
.shutter.top{
top: 0;
z-index: 2;
animation: slide-top 1s 3.5s forwards 1;
}
.shutter.top::before{
content: '';
position: absolute;
width: 100%;
height: 3px;
background: #fff;
bottom: 0;
left: -100%;
animation: slide-left 1s 2.5s forwards 1;
}
.shutter.bottom{
bottom: 0;
animation: slide-bottom 1s 3.5s forwards 1;
}
.circle{
position: absolute;
left: 50%;
bottom: -100px;
transform: translateX(-50%) rotate(-90deg);
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
animation: rotate 1s 1.25s forwards 1;
}
.circle:nth-child(2){
width: 150px;
height: 150px;
bottom: -75px;
animation: rotate 1s 1.25s forwards reverse 1, bg .5s 2.25s forwards 1;
}
.circle::before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 95%;
height: 95%;
border-radius: 50%;
background-color: #000;
z-index: 2;
}
.circle:nth-child(2)::before{
animation: bg .5s 2.25s forwards 1;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0 0 ;
width: 200px;
height: 200px;
background: #fff;
transform: rotate(0deg) skew(90deg);
animation: drawCircle .5s forwards 1;
}
.circle:nth-child(2) .box{
animation: drawCircle .5s .75s forwards 1;
}
@keyframes drawCircle{
0%{
transform: rotate(var(--rotateVal)) skewX(90deg);
}
100%{
transform: rotate(var(--rotateVal)) skewX(10deg);
}
}
@keyframes rotate{
100%{
transform: translateX(-50%) rotate(-270deg);
}
}
@keyframes bg{
100%{
background: #fff;
}
}
@keyframes slide-left{
100%{
left: 100%;
}
}
@keyframes slide-top{
100%{
top: -100%;
}
}
@keyframes slide-bottom{
100%{
bottom: -100%;
}
}
By typing this we are done with loading effect. we make two circles grow effect and line slide effect plus we made more animations here.
Now make content. In index.html
<div class="header">
<div class="left">
<div class="content">
<h1 class="heading"><span>amazing</span> web animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam porro corporis quod aliquid harum praesentium eius rerum commodi expedita. Eos?</p>
<button class="btn">explore</button>
</div>
</div>
<div class="right">
<p>01</p>
</div>
</div>
this will be our content structure. if you want you can add or remove things from here.
Now in style.css
.header{
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.left{
width: 60%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.content{
width: 80%;
min-width: 500px;
}
.heading{
font-size: 80px;
text-transform: capitalize;
}
.heading span{
font-size: 120px;
display: block;
}
.content p{
margin: 50px 0;
width: 90%;
}
.btn{
padding: 10px 40px;
border: none;
border-radius: 50px;
background: #000;
color: #fff;
font-size: 15px;
cursor: pointer;
text-transform: capitalize;
}
.right{
width: 40%;
height: 100%;
background: url(bg.png);
background-size: cover;
position: relative;
}
.right p{
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 60px;
padding: 10px;
width: 100px;
border: 5px solid #fff;
background: rgba(0, 0, 0, 0.5);
}
@media (max-width: 996px){
.header{
flex-direction: column-reverse;
}
.left, .right{
width: 100%;
}
.right{
height: 300px;
background-position: bottom center;
}
.heading, .heading span{
font-size: 7vw;
}
.content{
min-width: 70%;
}
.content p{
width: 100%;
}
}
@media (max-width: 500px){
.haeding, .heading span{
font-size: 60px;
}
}
In above code we styled our all elements of content and made them responsive with @media media query.
I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.
If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.
Posted on May 20, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related