LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

style loading spinner

Browse source
This commit is contained in:
Sean Yesmunt 2017-06-06 23:32:38 -07:00
parent 708efba091
commit 46862a302e
2 changed files with 60 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/js/component/video/internal/loading-screen.jsx
View file

@ -2,10 +2,12 @@ import React from "react";
const LoadingScreen = ({ status }) => const LoadingScreen = ({ status }) =>
<div className="video--loading--screen"> <div className="video--loading--screen">
<div className="loading--spinner" /> <div className="loading--screen--content">
<div className="loading--spinner" />
<div className="video--loading--status"> <div className="video--loading--status">
{status} {status}
</div>
</div> </div>
</div>; </div>;

71
ui/scss/component/_video.scss
View file

@ -29,25 +29,64 @@ video {
} }
.video--loading--screen { .video--loading--screen {
.loading--spinner { height: 100%;
width: 100px; display: flex;
height: 100px; justify-content: center;
background-color: white; align-items: center;
margin: auto;
animation-name: spin; .loading--screen--content {
animation-duration: 1s; .loading--spinner {
animation-iteration-count: infinite; position: relative;
animation-timing-function: linear; width: 11em;
height: 11em;
margin: 20px auto;
font-size: 3px;
border-radius: 50%;
@keyframes spin { background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
from { transform: rotate(0deg) } animation: spin 1.4s infinite linear;
to { transform: rotate(-360deg) } transform: translateZ(0);
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
}
&:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
}
&:after {
height: 75%;
width: 75%;
margin: auto;
bottom: 0;
right: 0;
background: black;
border-radius: 50%;
}
}
.video--loading--status {
padding-top: 20px;
color: white;
} }
}
.video--loading--status {
color: white;
} }
} }