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 }) =>
<div className="video--loading--screen">
<div className="loading--spinner" />
<div className="loading--screen--content">
<div className="loading--spinner" />
<div className="video--loading--status">
{status}
<div className="video--loading--status">
{status}
</div>
</div>
</div>;

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

@ -29,25 +29,64 @@ video {
}
.video--loading--screen {
.loading--spinner {
width: 100px;
height: 100px;
background-color: white;
margin: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
.loading--screen--content {
.loading--spinner {
position: relative;
width: 11em;
height: 11em;
margin: 20px auto;
font-size: 3px;
border-radius: 50%;
@keyframes spin {
from { transform: rotate(0deg) }
to { transform: rotate(-360deg) }
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
animation: spin 1.4s infinite linear;
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;
}
}