im learning to make webapplication and i wanted to created a SVG-Text animation which i did.. below u can see the code..my problem is that i am not being to load the mainpage or index page. In simple word, i just want to open my mainpage or index page of site to load after the SVG-Text animation**(PRE-LOADER)** is finished. Below the code of the SVG-animation .. its css, html
thank you in advance
its html
<html>
<head>
<title>learn</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<svg width="910" height="120" id="Layer_1" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.8,63.8H28.7v31.6h38v9.5H17.4V17.3h47.3v9.5h-36v27.7h34.1V63.8z" stroke="white" stroke-width="5"/>
<path class="st0" d="M86.3,42l9,13.5c2.3,3.5,4.3,6.8,6.4,10.3h0.4c2.1-3.8,4.2-7,6.2-10.4l8.8-13.4h12.4L108,72.4l22.1,32.5h-13
l-9.2-14.2c-2.5-3.6-4.6-7.2-6.8-10.9h-0.3c-2.1,3.8-4.3,7.1-6.6,10.9l-9.1,14.2H72.5l22.4-32.1L73.5,42H86.3z"stroke="white" stroke-width="5"/>
<path d="M141.1,62.5c0-8.1-0.3-14.6-0.5-20.5h10.3l0.5,10.8h0.3c4.7-7.7,12.1-12.2,22.4-12.2c15.2,0,26.7,12.9,26.7,32
c0,22.6-13.8,33.8-28.6,33.8c-8.3,0-15.6-3.6-19.4-9.9h-0.3v34.2h-11.3V62.5z M152.4,79.3c0,1.7,0.3,3.3,0.5,4.7
c2.1,7.9,9,13.4,17.2,13.4c12.1,0,19.1-9.9,19.1-24.3c0-12.6-6.6-23.4-18.7-23.4c-7.8,0-15.1,5.6-17.3,14.2
c-0.4,1.4-0.8,3.1-0.8,4.7V79.3z" stroke="white" stroke-width="5"/>
<path d="M221.5,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H221.5z M255,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H255z" stroke="white" stroke-width="5" />
<path d="M280.2,59c0-6.5-0.1-11.8-0.5-17h10.1l0.7,10.4h0.3c3.1-6,10.4-11.8,20.8-11.8c8.7,0,22.2,5.2,22.2,26.8v37.6
h-11.4V68.6c0-10.1-3.8-18.6-14.6-18.6c-7.5,0-13.4,5.3-15.3,11.7c-0.5,1.4-0.8,3.4-0.8,5.3v37.8h-11.4V59z"stroke="white" stroke-width="5"/>
<path d="M350.8,93.2c3.4,2.2,9.4,4.6,15.1,4.6c8.3,0,12.2-4.2,12.2-9.4c0-5.5-3.3-8.5-11.7-11.6
c-11.3-4-16.6-10.3-16.6-17.8c0-10.1,8.2-18.5,21.7-18.5c6.4,0,12,1.8,15.5,3.9l-2.9,8.3c-2.5-1.6-7-3.6-12.9-3.6
c-6.8,0-10.5,3.9-10.5,8.6c0,5.2,3.8,7.5,12,10.7c10.9,4.2,16.5,9.6,16.5,19c0,11.1-8.6,18.9-23.5,18.9c-6.9,0-13.3-1.7-17.7-4.3
L350.8,93.2z"stroke="white" stroke-width="5"/>
<path d="M410.2,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H410.2z M443.8,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H443.8z"stroke="white" stroke-width="5"/>
<path d="M508.3,26.9h-26.7v-9.6h64.9v9.6h-26.8v78h-11.4V26.9z"stroke="white" stroke-width="5"/>
<path d="M550,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5H550V61.6z"stroke="white" stroke-width="5"/>
<path d="M626.7,104.9l-0.9-7.9h-0.4c-3.5,4.9-10.3,9.4-19.2,9.4c-12.7,0-19.2-9-19.2-18.1c0-15.2,13.5-23.5,37.8-23.4
v-1.3c0-5.2-1.4-14.6-14.3-14.6c-5.9,0-12,1.8-16.4,4.7l-2.6-7.5c5.2-3.4,12.7-5.6,20.7-5.6c19.2,0,23.9,13.1,23.9,25.7v23.5
c0,5.5,0.3,10.8,1,15.1H626.7z M625,72.8c-12.5-0.3-26.7,2-26.7,14.2c0,7.4,4.9,10.9,10.8,10.9c8.2,0,13.4-5.2,15.2-10.5
c0.4-1.2,0.7-2.5,0.7-3.6V72.8z"stroke="white" stroke-width="5"/>
<path d="M699.4,102.6c-3,1.6-9.6,3.6-18.1,3.6c-19,0-31.3-12.9-31.3-32.1c0-19.4,13.3-33.4,33.8-33.4
c6.8,0,12.7,1.7,15.9,3.3l-2.6,8.8c-2.7-1.6-7-3-13.3-3c-14.4,0-22.2,10.7-22.2,23.8c0,14.6,9.4,23.5,21.8,23.5
c6.5,0,10.8-1.7,14-3.1L699.4,102.6z"stroke="white" stroke-width="5"/>
<path d="M724.1,70.8h0.3c1.6-2.2,3.8-4.9,5.6-7.2L748.4,42h13.8l-24.3,25.9l27.7,37.1h-13.9l-21.7-30.2l-5.9,6.5v23.7
h-11.3V12.6h11.3V70.8z"stroke="white" stroke-width="5"/>
<path d="M780.1,75.5c0.3,15.5,10.1,21.8,21.6,21.8c8.2,0,13.1-1.4,17.4-3.3l2,8.2c-4,1.8-10.9,3.9-20.9,3.9
c-19.4,0-30.9-12.7-30.9-31.7c0-19,11.2-33.9,29.5-33.9c20.5,0,26,18.1,26,29.6c0,2.3-0.3,4.2-0.4,5.3H780.1z M813.6,67.3
c0.1-7.3-3-18.6-15.9-18.6c-11.6,0-16.6,10.7-17.6,18.6H813.6z"stroke="white" stroke-width="5"/>
<path d="M838.8,61.6c0-7.4-0.1-13.8-0.5-19.6h10l0.4,12.4h0.5c2.9-8.5,9.8-13.8,17.4-13.8c1.3,0,2.2,0.1,3.3,0.4v10.8
c-1.2-0.3-2.3-0.4-3.9-0.4c-8.1,0-13.8,6.1-15.3,14.7c-0.3,1.6-0.5,3.4-0.5,5.3v33.5h-11.3V61.6z"stroke="white" stroke-width="5"/>
</svg>
</body>
</html>
its css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background-color: rgb(32,35,48);
}
#Layer_1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: fill 0.5s ease forwards 5.8s;
}
#Layer_1 path:nth-child(1){
stroke-dasharray: 414;
stroke-dashoffset: 414;
animation: line-anim 2s ease forwards;
}
#Layer_1 path:nth-child(2){
stroke-dasharray: 320.55609130859375;
stroke-dashoffset: 320.55609130859375;
animation: line-anim 2s ease forwards 0.3s;
}
#Layer_1 path:nth-child(3){
stroke-dasharray: 437.967041015625;
stroke-dashoffset: 437.967041015625;
animation: line-anim 2s ease forwards 0.6s;
}
#Layer_1 path:nth-child(4){
stroke-dasharray: 366.2216491699219;
stroke-dashoffset: 366.2216491699219;
animation: line-anim 2s ease forwards 0.9s;
}
#Layer_1 path:nth-child(5){
stroke-dasharray: 335.585693359375;
stroke-dashoffset: 335.585693359375;
animation: line-anim 2s ease forwards 1.2s;
}
#Layer_1 path:nth-child(6){
stroke-dasharray: 268.7137145996094;
stroke-dashoffset: 268.7137145996094;
animation: line-anim 2s ease forwards 1.5s;
}
#Layer_1 path:nth-child(7){
stroke-dasharray: 366.2216796875;
stroke-dashoffset: 366.2216796875;
animation: line-anim 2s ease forwards 1.8s;
}
#Layer_1 path:nth-child(8){
stroke-dasharray: 305.0000305175781;
stroke-dashoffset: 305.0000305175781;
animation: line-anim 2s ease forwards 2.1s;
}
#Layer_1 path:nth-child(9){
stroke-dasharray: 201.02734375;
stroke-dashoffset: 201.02734375;
animation: line-anim 2s ease forwards 2.4s;
}
#Layer_1 path:nth-child(10){
stroke-dasharray: 356.66552734375;
stroke-dashoffset: 356.66552734375;
animation: line-anim 2s ease forwards 2.7s;
}
#Layer_1 path:nth-child(11){
stroke-dasharray: 257.80328369140625;
stroke-dashoffset: 257.80328369140625;
animation: line-anim 2s ease forwards 3.0s;
}
#Layer_1 path:nth-child(12){
stroke-dasharray: 390.1777038574219;
stroke-dashoffset: 390.1777038574219;
animation: line-anim 2s ease forwards 3.3s;
}
#Layer_1 path:nth-child(13){
stroke-dasharray: 366.221923828125;
stroke-dashoffset: 366.221923828125;
animation: line-anim 2s ease forwards 3.6s;
}
#Layer_1 path:nth-child(14){
stroke-dasharray: 201.02735900878906;
stroke-dashoffset: 201.02735900878906;
animation: line-anim 2s ease forwards 3.9s;
}
@keyframes line-anim{
to{
stroke-dashoffset:0;
}
}
@keyframes fill{
from{
fill: transparent;
}
to{
fill:white
}
}