Document

Real time example

Inspect the HTML

<!DOCTYPE html>
<html ><head>
<meta charset="UTF-8">
<title>Pre-loader Version-3</title>
<style>
#pre-loader{
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 50%;
width: 90px;
}
#pre-loader ul {
margin: 0;
list-style: none;
width: 90px;
position: relative;
padding: 0;
height: 10px;
}
#pre-loader ul li {
position: absolute;
width: 2px;
height: 0;
background-color: #000;
bottom: 0;
}
@keyframes shortline {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
@keyframes longline {
0% {
height: 20px;
}
50% {
height: 65px;
}
100% {
height: 20px;
}
}
#pre-loader li:nth-child(1) {
left: 0;
animation: longline 1s ease infinite 0;
}
#pre-loader li:nth-child(2) {
left: 15px;
animation: shortline 1s ease infinite 0.1s;
}
#pre-loader li:nth-child(3) {
left: 30px;
animation: longline 1s ease-in-out infinite 0.2s;
}
#pre-loader li:nth-child(4) {
left: 45px;
animation: shortline 1s ease-in infinite 0.3s;
}
#pre-loader li:nth-child(5) {
left: 60px;
animation: longline 1s ease-in-out infinite 0.4s;
}
#pre-loader li:nth-child(6) {
left: 75px;
animation: shortline 1s ease infinite 0.5s;
}
</style></head>
<body>
<div class="loader">
<br><br><br><br><br><br><br>
<div id="pre-loader">
<ul>
<li></li><li></li>
<li></li><li></li>
<li></li><li></li>
</ul>
</div></div>
</body></html>

Download this HTML Source Code

Also Read

Automatic-Typewriter effect

Awesome CSS button version-3

Image Slideshow version-2

12 Modal Checkboxes

Pre-Loader version-2

Kumar Lakshmanan

Pre-Loader version-3

Real time example

Inspect the HTML

Download this HTML Source Code

Also Read

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Pre-Loader version-3

Real time example

Inspect the HTML

Download this HTML Source Code

Also Read

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget