mirror of
https://github.com/lensapp/lens.git
synced 2024-11-11 05:25:25 +03:00
155 lines
4.7 KiB
HTML
155 lines
4.7 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
html, body{
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
background: #1e2124;
|
|
color: #6c757d;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.aligner-center-center{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.aligner-content{
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 80px;
|
|
}
|
|
svg{
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.loading{
|
|
padding-top: 10px;
|
|
position: relative;
|
|
}
|
|
.bar{
|
|
position: relative;;
|
|
height: 2px;
|
|
background: #262b2f;
|
|
}
|
|
.progress{
|
|
position: relative;
|
|
height: 2px;
|
|
background: #3d90ce;
|
|
box-shadow: 0 0 20px #3d90ce;
|
|
animation-name: loader-animation;
|
|
animation-duration: 1.6s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes loader-animation{
|
|
0% {
|
|
left: 0;
|
|
width: 0px;
|
|
}
|
|
50% {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
width: 0px;
|
|
}
|
|
}
|
|
.glow-wrapper{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 2px;
|
|
top: -2px;
|
|
}
|
|
|
|
.glow{
|
|
height: 100%;
|
|
display: flex;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.glow div{
|
|
flex: 1;
|
|
background: #3d90ce;
|
|
animation: glow 0.8s infinite alternate ease;
|
|
box-shadow: 0 0 20px #3d90ce;
|
|
}
|
|
|
|
.glow div.b1{ animation-delay: -0.72s; }
|
|
.glow div.b2{ animation-delay: -0.64s; }
|
|
.glow div.b3{ animation-delay: -0.56s; }
|
|
.glow div.b4{ animation-delay: -0.48s; }
|
|
.glow div.b5{ animation-delay: -0.40s; }
|
|
.glow div.b6{ animation-delay: -0.32s; }
|
|
.glow div.b7{ animation-delay: -0.24s; }
|
|
.glow div.b8{ animation-delay: -0.16s; }
|
|
.glow div.b9{ animation-delay: -0.08s; }
|
|
|
|
|
|
@keyframes glow{
|
|
100% {
|
|
background: transparent;
|
|
flex: 10;
|
|
box-shadow: 0 0 0 transparent;
|
|
}
|
|
}
|
|
|
|
.text{
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="aligner-center-center">
|
|
<div class="aligner-content">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497.43 228.97">
|
|
<defs>
|
|
<style>.cls-1{fill:#3f90ce;}</style>
|
|
</defs>
|
|
<g id="Layer_2" data-name="Layer 2">
|
|
<g id="Layer_1-2" data-name="Layer 1">
|
|
<path class="cls-1" d="M0,0H12.25V170H110v11.64H0Z"/>
|
|
<path class="cls-1" d="M138.75,167.24Q122.82,148,122.82,116.39t15.93-50.84q15.93-19,42.27-19T223.29,64q15.92,17.46,15.93,46.55v5.82H135.08q0,26.65,12.55,42.58T181,174.9a50.14,50.14,0,0,0,28.18-8.27A44.23,44.23,0,0,0,227,144.27h12.25q-3.08,18.07-19.61,30T181,186.23Q154.68,186.23,138.75,167.24ZM227,104.75v-4.59a46.49,46.49,0,0,0-14.71-30.63A45.05,45.05,0,0,0,181,57.28a43.4,43.4,0,0,0-30.94,12.56,47.58,47.58,0,0,0-15,31.54v3.37Z"/>
|
|
<path class="cls-1" d="M268,181.64V51.15h12.25V73.21a41.83,41.83,0,0,1,16.85-18.38,46.6,46.6,0,0,1,25.12-7q19.29,0,32.77,12.56Q368.79,73.21,368.78,91v90.67H356.53V91a30.37,30.37,0,0,0-10.11-23,34.12,34.12,0,0,0-24.19-9.5A40.35,40.35,0,0,0,295,68.92a45.21,45.21,0,0,0-14.7,26.65v86.07Z"/>
|
|
<path class="cls-1" d="M409.83,172.75Q395.12,160.51,395.12,143h11.34q0,13.17,11.33,22.67,11.32,9.18,27.26,9.19,18.38,0,29.71-8.27a27,27,0,0,0,11-22.36q0-10.41-11.64-17.77-11.64-7-31.24-8.88-20.84-1.84-33.08-11.64-12.57-9.8-12.56-24.2,0-16.23,12.56-25.11t35.22-8.89q21.75,0,34.61,9.5,13.17,9.5,13.17,25.42H481.19A28.06,28.06,0,0,0,469.55,64q-9.49-6.73-24.5-6.74-16.55,0-26.34,6.74t-9.8,17.76q0,10.43,11.94,17.77,11.64,7,31.25,8.88,20.5,1.84,33.08,12.25,12.24,10.42,12.25,26,0,17.46-14.4,27.87Q468.95,185,445.05,185,424.22,185,409.83,172.75Z"/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<div class="loading">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="glow-wrapper">
|
|
<div class="glow">
|
|
<div class="b1"></div>
|
|
<div class="b2"></div>
|
|
<div class="b3"></div>
|
|
<div class="b4"></div>
|
|
<div class="b5"></div>
|
|
<div class="b6"></div>
|
|
<div class="b7"></div>
|
|
<div class="b8"></div>
|
|
<div class="b9"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|