Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-28 17:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

loaders improvements

Browse source
This commit is contained in:
svetlagasheva 2019-04-01 18:41:19 +03:00
parent 822835642f
commit eb2dee45a0
4 changed files with 20 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/routes/Addons/styles.less
View file

@ -103,6 +103,7 @@
.placeholder {
display: flex;
flex-direction: row;
position: relative;
z-index: 0;
width: var(--addon-width);
@ -175,7 +176,7 @@
width: 500%;
margin-left: -250%;
animation: placeholderAnimation 1s linear infinite;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%);
}
@keyframes placeholderAnimation {

12
src/routes/Board/styles.less
View file

@ -48,7 +48,9 @@
.placeholder {
flex: 1;
margin: 1em;
padding: 0.4em;
position: relative;
z-index: 0;
overflow: hidden;
background-color: var(--color-backgroundlighter);
@ -78,10 +80,10 @@
right: 0;
bottom: 0;
left: 50%;
width: 600%;
margin-left: -300%;
animation: placeholderAnimation 0.8s linear infinite;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
width: 800%;
margin-left: -400%;
animation: placeholderAnimation 1s linear infinite;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 56%);
}
@keyframes placeholderAnimation {
@ -94,7 +96,7 @@
}
}
&:nth-child(n+8) {
&:nth-child(n+7) {
display: none;
}
}

5
src/routes/Detail/StreamsList/StreamsList.js
View file

@ -9,9 +9,8 @@ const renderStreamPlaceholders = () => {
for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
streamPlaceholders.push(
<div key={placeholderNumber} className={styles['placeholder']}>
<div className={styles['logo-placeholder']}></div>
<div className={styles['text-placeholder']}></div>
<div className={styles['button-placeholder']}></div>
<div className={styles['logo-placeholder']} />
<div className={styles['text-placeholder']} />
</div>
)
}

24
src/routes/Detail/StreamsList/styles.less
View file

@ -23,28 +23,22 @@
margin-top: var(--spacing);
width: var(--stream-width);
display: flex;
flex-direction: row;
position: relative;
z-index: 0;
overflow: hidden;
background-color: var(--color-backgroundlighter);
.logo-placeholder {
flex: 1;
margin: var(--spacing) 0 var(--spacing) var(--spacing);
width: calc(.2 * var(--stream-width));
height: calc(.2 * var(--stream-width));
background-color: var(--color-secondarylighter20);
}
.text-placeholder {
flex: 3;
margin: var(--spacing) 0 var(--spacing) var(--spacing);
height: calc(.2 * var(--stream-width));
background-color: var(--color-secondarylighter20);
}
.button-placeholder {
margin: var(--spacing) var(--spacing) var(--spacing) 0;
height: calc(.2 * var(--stream-width));
width: calc(0.07 * var(--stream-width));
flex: 1;
margin: var(--spacing);
background-color: var(--color-secondarylighter20);
}
@ -55,10 +49,10 @@
right: 0;
bottom: 0;
left: 50%;
width: 600%;
margin-left: -300%;
animation: placeholderAnimation 0.8s linear infinite;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
width: 800%;
margin-left: -400%;
animation: placeholderAnimation 1s linear infinite;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 56%);
}
@keyframes placeholderAnimation {