Make Your Own Logo Preloader
Interested to make a preloader for your website using your own logo, Don't worry it is very easy and simple to create your own preloader from your logo only using HTML and CSS.
First, we need to convert your logo in SVG format in this case I have used adobe Xd because I have my logo in illustrator format which is very convenient to convert in SVG by using Adbode XD.
After converting your logo into SVG format you need to create a div with preloader id and create another div in it with class preloader-logo like this, it depends on you to set the id or class name whatever you want.
After it put your SVG code in the preloader-logo class.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to make own logo preloader</title>
</head>
<body>
<div id="preloader">
<div class="preloader-logo">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="80" viewBox="0 0 452.84 205.175">
<g id="Layer_1" data-name="Layer 1" transform="translate(-677.215 -457)">
<path id="Path_1" data-name="Path 1" d="M921.442,546.554c-17.011,13.59-29.758,32.791-44.171,46.237-27.119,25.313-51.385,12.342-87.146-8.455-12.989-7.554-81.331-59.572-111.6-83.995a3.465,3.465,0,0,1,3.21-6c67.83,21.626,139.413,67.209,160.961,47.464,28.878-26.463,64.446-46.075,100.021-33.834,13.26,4.559,33.269,22.491,44,35.957a3.466,3.466,0,0,1-4,5.374C961.338,540.9,937.786,533.5,921.442,546.554Z" fill="#5c5552"/>
</g>
<g id="Layer_2" data-name="Layer 2" transform="translate(-677.215 -457)">
<path id="Path_2" data-name="Path 2" d="M1125.843,496.694a2.939,2.939,0,0,1,3.7,4.283c-8.7,12.948-27.414,29.143-40,36.009-33.022,18.028-63.793,17.051-96.7-4.2-25.011-16.154-43.621-52.961-102.8-31.557a2.94,2.94,0,0,1-3.178-4.739c9.25-10.187,19.438-19.34,31.538-26.287,32.1-18.429,63.755-17.627,94.732,2.786,16.462,10.841,33.385,20.638,52.559,25.953C1086.313,504.642,1106.453,505.62,1125.843,496.694Z" fill="#ed3d01"/>
</g>
<g id="Layer_3" data-name="Layer 3" transform="translate(-677.215 -457)">
<circle id="Ellipse_1" data-name="Ellipse 1" cx="24.994" cy="24.994" r="24.994" transform="translate(958.191 563.471)" fill="#5c5552"/>
</g>
<g id="Layer_4" data-name="Layer 4" transform="translate(-677.215 -457)">
<circle id="Ellipse_2" data-name="Ellipse 2" cx="24.994" cy="24.994" r="24.994" transform="translate(915.569 612.188)" fill="#ed3d01"/>
</g>
</svg>
</div>
</div>
</body>
</html>
CSS CODE
#preloader{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
z-index: 10000;
overflow: hidden;
}
.preloader-logo{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#Path_1{
animation: animateOne -0.5s linear 0.8s infinite alternate;
}
#Path_2{
animation: animateTwo 0.8s linear 0.8s infinite alternate;
}
#Ellipse_1{
animation: animateThree -0.5s linear 1s infinite alternate;
}
#Ellipse_2{
animation: animateFour 0.8s linear 1s infinite alternate;
}
@keyframes animateOne {
0%{
opacity: 0;
fill: #ffffff;
}
100%{
opacity: 1;
fill: #5c5552;
}
}
@keyframes animateTwo {
0%{
opacity: 0;
fill: #ffffff;
}
100%{
opacity: 1;
fill: #ed3d01;
}
}
@keyframes animateThree {
0%{
opacity: 0;
r: 0;
cx: 10;
cy: -30;
}
50%{
opacity: 0.5;
cx: 24.994;
cy: 24.994;
}
100%{
opacity: 1;
opacity: 0.5;
r: 24.994;
cx: 24.994;
cy: 24.994;
}
}
@keyframes animateFour {
0%{
opacity: 0;
r: 0;
cx: 100;
cy: -100;
}
50%{
opacity: 0.5;
cx: 24.994;
cy: 24.994;
}
100%{
opacity: 1;
opacity: 0.5;
r: 24.994;
cx: 24.994;
cy: 24.994;
}
}
Note: Please use your own logo SVG code.
JavaScript Quote Maker from HTML CSS
Convert Adobe XD UI Design to HTML
0 Comments