Preloader Jquery in javascript übersetzen
Hey… Heut mal eine andere Frage... ich bastle fleißig an meinen Preloader herum... und will mehrere schreiben.. Jetzt habe ich noch das Problem, dass der Code in jQuery ist ich es aber gerne in Javascript hätte… ich weiß nicht wie ich es angehen soll… ich hab den jQuery code damals kopiert möchte es aber in Zukunft selbst schreiben und vor allem verstehen :D jQuery ist super ja... aber na ja… ;D
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css_webseite/bootstrap.min.css">
<style>
* {
margin: 0px;
padding: 0px;
}
.preloadercontainer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
display:block;
opacity:1;
z-index: 999999;
animation:displaynone 3s linear 1 forwards;
}
@keyframes displaynone{
0%{
opacity:1;
}
90%{
opacity:0.8;
}
100%{
opacity:0;
}
}
.loadingtext {
margin-top: 20px;
color: #383833;
font-family: 'Quicksand', sans-serif;
text-align:center;
}
.loadingbarcenter{
margin-top: 25%;
display: flex;
justify-content: center;
}
.loadingbaroverlay{
position: absolute;
width:200px;
height:20px;
border-radius: 20px;
background: grey;
z-index: 1;
animation: loadingbaroverlay 3s;
animation-iteration-count: 1;
}
.loadingbar{
position: absolute;
display:block;
width:200px;
height:20px;
border-radius: 20px;
background: transparent;
animation: loadingprogress 2.8s ;
animation-iteration-count: 1;
z-index:2;
}
@keyframes loadingprogress{
0%{border-right: 200px solid rgb(70, 68, 68);}
50%{border-right: 150px solid rgb(121, 119, 119);}
100%{border-right: 0px solid rgb(184, 182, 182);}
}
@keyframes loadingbaroverlay{
from{
background: linear-gradient(90deg, rgba(136,8,212,1) 0%, rgba(32,196,174,1) 54%, rgba(199,20,148,1) 100%);
}
to{
background: linear-gradient(90deg, rgba(136,8,212,1) 0%, rgba(32,196,174,1) 54%, rgba(199,20,148,1) 100%);
}
}
.content{
height:2000px;
}
</style>
</head>
<body>
<div class="content"></div>
<div class="preloadercontainer ">
<div class="loadingbarcenter">
<div class="loadingbaroverlay"></div>
<div class="loadingbaroverlaybackground"></div>
<div class="loadingbaroverlaybar"></div>
<div class="loadingbar"></div>
</div>
<div class="loadingtext">
<h1>Loading</h1>
</div>
</div>
</body>
</html>