mirror of
https://github.com/MinazukiAmane/shortlink.git
synced 2025-03-16 21:25:58 +08:00
update for a loading scene
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:
parent
3acb7b33cf
commit
eb4a7590a5
134
pages/index.tsx
134
pages/index.tsx
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user