Fixing Loading animation

This commit is contained in:
Fabian 2019-06-03 17:24:50 +02:00
parent 31d9f99b77
commit 311409d36d
3 changed files with 19 additions and 11 deletions

View File

@ -40,7 +40,7 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
} }
render() { render() {
let extrac = ""; let extrac = undefined;
let color; let color;
let text; let text;
if (this.state.syncing) { if (this.state.syncing) {
@ -69,5 +69,4 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
</span> </span>
</footer> </footer>
} }
} }

View File

@ -1,10 +1,18 @@
@import "../vars.scss"; @import "../vars.scss";
.reloading { animation: turner 1s infinite linear } .reloading {
display: inline-block;
animation: turner 1s linear infinite;
}
@keyframes turner{ @keyframes turner {
from{ transform: rotate(0deg) } from {
to { transform: rotate(360deg) } transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
} }
footer { footer {
@ -13,11 +21,11 @@ footer {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
// border-top: 1px solid $border-color; // border-top: 1px solid $border-color;
padding: 0.15em !important; padding: 0.15em 1em !important;
} }

View File

@ -45,6 +45,7 @@
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
} }
span { span {
margin-left: 3px; margin-left: 3px;
word-break: break-word; word-break: break-word;
@ -56,5 +57,5 @@
margin-right:var(--notification-margin); margin-right:var(--notification-margin);
padding: 0.5em; padding: 0.5em;
width: 300px; width: 300px;
} // transition: all .3s;
}