Hello, guys in this tutorial we will create an animated loader with SVG animation (Triangle loading animation using HTML and CSS)
What is Page Preloader?
Essentially, preloaders (also known as loaders) are what you see on the screen while the rest of the content on the page continues to load. Preloaders are often simple or complex animations that are used to entertain visitors during the termination of server operations.
First, we need to create two files index.html and style.css then we need to do code for it.
Triangle Loader Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Triangle loading Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="loading_outer">
<div class="loader-svg">
<div class="top">
<svg width="75px" height="75px" viewBox="-4 -1 38 28">
<polygon fill="transparent"
stroke = "#fff"
stroke-width="2"
points="15,0 30,30 0,30">
</polygon>
</svg>
</div>
<div class="mid">
<svg width="150px" height="150px" viewBox="-4 -1 38 28">
<polygon fill="transparent"
stroke = "#fff"
stroke-width="2"
points="15,0 30,30 0,30">
</polygon>
</svg>
</div>
<div class="bot">
<svg width="75px" height="75px" viewBox="-4 -1 38 28">
<polygon fill="transparent"
stroke = "#fff"
stroke-width="2"
points="15,0 30,30 0,30">
</polygon>
</svg>
</div>
</div>
<div class="loader-text">Loading<span>...</span></div>
</div>
</body>
</html>Triangle Loader Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
outline: 0;
color: #fff;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
background: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.loader-svg {
display: flex;
align-items: flex-end;
}
.loader-svg .mid svg polygon {
stroke-dasharray: 50;
animation: midanim 2.5s linear infinite;
}
@keyframes midanim {
to {
stroke-dashoffset:100;
}
}
.loader-svg svg polygon {
stroke-dasharray: 25;
animation: anim 2s linear infinite;
}
@keyframes anim {
to {
stroke-dashoffset:100;
}
}
.loader-text {
text-align: center;
font-size: 50px;
text-transform: uppercase;
margin: 20px 0;
color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
.loader-text span {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
animation: dash 1.5s infinite;
}
@keyframes dash {
from {
-webkit-text-stroke: 0.5px #fff;
}
to {
color: #fff;
}
}