Serenetia/shortlink
1
0
Fork 0
mirror of https://github.com/MinazukiAmane/shortlink.git synced 2025-03-16 17:45:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update for a loading scene

Browse Source 
change from use video and audio on the loading now only use di video, and change the styling for loading
This commit is contained in:
Amane Serenetia 2024-06-03 07:16:18 +07:00
parent 3acb7b33cf
commit eb4a7590a5
1 changed files with 62 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
pages/index.tsx
View File

@ -67,23 +67,20 @@ const Home = () => {
<Container> <Container>
{initialLoading ? ( {initialLoading ? (
<LoadingContainer> <LoadingContainer>
<BackgroundVideo autoPlay muted loop> <BackgroundVideo autoPlay loop>
<source src="/video/video.webm" type="video/webm" /> <source src="/video/video.webm" type="video/webm" />
</BackgroundVideo> </BackgroundVideo>
<BackgroundAudio ref={audioRef} autoPlay loop>
<source src="/sounds/music.mp3" type="audio/mpeg" />
</BackgroundAudio>
<ProgressContainer> <ProgressContainer>
<LoadingItem>{currentLoadingItem}</LoadingItem> <LoadingItem>{currentLoadingItem}</LoadingItem>
<ProgressBarContainer> <ProgressBarContainer>
<ProgressBar style={{ width: `${progress}%` }} /> <ProgressBar style={{ background: `linear-gradient(to right, #f0c8a0 0% ${progress - 5}%, #f0dcc8 ${progress}%, transparent ${progress}%)` }}/>
</ProgressBarContainer> </ProgressBarContainer>
<ProgressText>{progress.toFixed(2)}%</ProgressText> <ProgressText>{progress.toFixed(2)}%</ProgressText>
</ProgressContainer> </ProgressContainer>
</LoadingContainer> </LoadingContainer>
) : ( ) : (
<> <>
<VideoBackground autoPlay muted loop> <BackgroundVideo autoPlay muted loop>
<source <source
src="/video/dekstop.mp4" src="/video/dekstop.mp4"
type="video/mp4" type="video/mp4"
@ -95,7 +92,7 @@ const Home = () => {
media="(max-width: 767px)" media="(max-width: 767px)"
/> />
Your browser does not support the video tag. Your browser does not support the video tag.
</VideoBackground> </BackgroundVideo>
<Content> <Content>
<h1>Create Shortlink</h1> <h1>Create Shortlink</h1>
<Input <Input
@ -129,15 +126,17 @@ const Home = () => {
const Container = styled.div` const Container = styled.div`
position: relative; position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
`; `;
const VideoBackground = styled.video` const BackgroundVideo = styled.video`
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -162,57 +161,6 @@ const Input = styled.input`
margin-bottom: 20px; margin-bottom: 20px;
`; `;
const Button = styled.button`
padding: 10px 20px;
`;
const ProgressContainer = styled.div`
position: absolute;
bottom: 20px;
width: 80%;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 10px;
`;
const ProgressBarContainer = styled.div`
width: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
overflow: hidden;
`;
const ProgressBar = styled.div`
height: 10px;
background: linear-gradient(to right, #4caf50, #81c784);
transition: width 0.5s;
`;
const ProgressText = styled.span`
margin-top: 10px;
font-size: 14px;
color: white;
`;
const LoadingContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
`;
const LoadingItem = styled.div`
font-size: 14px;
margin-bottom: 10px;
color: white;
`;
const ShortlinkLoadingContainer = styled.div` const ShortlinkLoadingContainer = styled.div`
margin-top: 20px; margin-top: 20px;
width: 80%; width: 80%;
@ -224,18 +172,60 @@ const ShortlinkLoadingContainer = styled.div`
border-radius: 10px; border-radius: 10px;
`; `;
const BackgroundVideo = styled.video` const Button = styled.button`
position: absolute; padding: 10px 20px;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
`; `;
const BackgroundAudio = styled.audio` const LoadingContainer = styled.div`
display: block; width: 100%;
height: 100%;
color: white;
font-size: 18px;
`;
const ProgressContainer = styled.div`
position: absolute;
width: 100%;
bottom: 40px;
padding: 0 20%;
box-sizing: border-box;
display: grid;
grid-template-areas:
'text . perc'
'bar bar bar'
;
grid-template-columns: auto 1fr auto;
z-index: 2;
`;
const ProgressBarContainer = styled.div`
grid-area: bar;
width: 100%;
background: rgba(240, 220, 200, 6%);
border: 1px solid rgba(255, 255, 255, 8%);
border-radius: 5px;
overflow: hidden;
`;
const ProgressBar = styled.div`
height: 0.6em;
background: transparent;
transition: width 0.5s;
`;
const ProgressText = styled.span`
grid-area: perc;
margin-right: 8px;
`;
const LoadingItem = styled.div`
grid-area: text;
margin-left: 8px;
`; `;
export default Home; export default Home;