I have the following code:
// Preloader
$(window).on('DOMContentLoaded', function() {
if ($('#preloader').length) {
$('#preloader').delay(1000).fadeOut('slow');
}
});* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500;700&family=Montserrat:wght@400;600&family=Oswald:wght@500&family=Pacifico&family=Roboto:ital,wght@0,400;0,900;1,500&display=swap');
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
overflow: hidden;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.svg-file path {
fill: transparent;
stroke-width: 3;
stroke: rgb(1, 36, 133);
}
.svg-file.z-logo path {
stroke-dasharray: 550;
stroke-dashoffset: 0;
}
.svg-file.z-logo path {
animation: animate-zlogo 3s linear infinite;
}
svg {
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 1));
transform: scale(2);
}
.svg-file h2 {
font-family: "Roboto", cursive;
transform: translate(0, 50px) skewX(-210deg) rotate(-6deg);
font-size: 3em;
color: #044d77;
}
.svg-file span {
animation: dots 2.5s steps(6, end) infinite;
font-size: 5em;
display: block;
transform: translate(0, 65px) skewX(-210deg) rotate(-6deg);
background-color: rgb(5, 46, 80);
width: 8px;
height: 5px;
}
@keyframes fadein-fadeout {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes animate-zlogo {
0% {
stroke-dashoffset: -50;
}
20% {
stroke-dashoffset: 550;
fill: transparent;
}
40% {
fill: transparent;
stroke-dashoffset: 1100;
}
60% {
stroke-dashoffset: 1100;
fill: #05f7f9;
}
80% {
stroke-width: 0;
fill: #05f7f9;
}
100% {
/* stroke-dashoffset: 0; */
stroke-width: 3;
fill: transparent;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader">
<div class="svg-file z-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133 133" width="133" height="133"><g id="H"><path d="M45.33 78.22L87.67 78.22L87.67 133L121.05 133L121.05 0L87.67 0L87.67 49.33L45.33 49.33L45.33 0L11.95 0L11.95 133L45.33 133L45.33 78.22Z" fill="#47AF9A"/></g></svg>
<span></span>
</div>
</div>I want to add a small box around it, and to better show you what kind of output I am looking for, then I want this in end:
So, all I am missing right now is that background box with the color black, and I do not want the ox to be filled with page cover, it should be approx the same height and width as the picture above. Think of it as being a preloader for a site. In the middle of the page, a small/medium-sized box with h logo displayed inside it like how it is shown above.
Note: The animation should work inside the box, and should not go outside the box, so the animation when you run the above code should take place in the black box. I am just looking for help on how to accurately set u the dimensions of the box like it is shown in the picture. I will adjust the measurements later, but right now I am looking for the output of the box to be displayed.
I tried using the same logic as someone who asked a similar question before, but it did not work and it gave me a black screen which is not what I want. I want the whole screen to be white, but this background box of the image, as shown above, to be black.
Expected Output:
The animation should still perfectly run fine inside the box, and as you can see, the box is in the middle of the screen, and the screen has a whitebackground.