MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Update API layout

Browse source
This commit is contained in:
Korbs 2024-07-11 15:25:05 -04:00
parent 833c2c3be3
commit ecac35c4bd
1 changed files with 58 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/layouts/API.astro Normal file
View file

@ -0,0 +1,58 @@
---
// Properties
const { Title, Description } = Astro.props
// Components
import Head from '@components/global/Head.astro'
// Styles
import '@styles/index.scss'
import '@styles/mobile.scss'
---
<Head Title='MinPluto' Description={Description}/>
<div class="api-wait">
<center><img src="/images/logo/MinPluto - Logo.png"/></center>
<div class="progress-bar"><div class="progress-bar-value"></div></div>
<slot/>
</div>
<style>
.api-wait {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
gap: 64px;
width: 360px;
}
.progress-bar {
height: 6px;
background-color: rgba(5, 114, 206, 0.2);
width: 100%;
overflow: hidden;
border-radius: 1rem;
}
.progress-bar-value {
width: 100%;
height: 100%;
background-color: rgb(5, 114, 206);
animation: indeterminateAnimation 1s infinite linear;
transform-origin: 0% 50%;
}
@keyframes indeterminateAnimation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}
</style>