Added spinner

This commit is contained in:
Benoit Schweblin 2017-07-26 19:11:03 +01:00
parent 886fa85b45
commit f06f872a04
3 changed files with 55 additions and 8 deletions

View File

@ -104,4 +104,41 @@ textarea {
}
}
}
$r: 9px;
$d: $r * 2;
$t: 1500ms;
.spinner {
width: $d;
height: $d;
display: block;
position: relative;
border: $d/10 solid currentColor;
border-radius: 50%;
&::before,
&::after {
content: "";
position: absolute;
display: block;
width: $d/10;
background-color: currentColor;
border-radius: ($d/10)/2;
transform-origin: 50% 0;
}
&::before {
height: $r - $d/5;
left: $r - $d/10 - $d/20;
top: 50%;
animation: spin $t linear infinite;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>

View File

@ -1,6 +1,9 @@
<template>
<div class="navigation-bar" v-bind:class="{'navigation-bar--editor': showEditor}">
<div class="navigation-bar__inner navigation-bar__inner--right">
<div class="navigation-bar__inner navigation-bar__inner--right flex flex--row">
<div class="navigation-bar__spinner">
<div class="spinner"></div>
</div>
<div class="navigation-bar__title navigation-bar__title--text text-input" v-bind:style="{maxWidth: titleMaxWidth + 'px'}"></div>
<input class="navigation-bar__title navigation-bar__title--input text-input" v-bind:class="{'navigation-bar__title--focused': titleFocused, 'navigation-bar__title--scrolling': titleScrolling}" v-bind:style="{maxWidth: titleMaxWidth + 'px'}" @focus="editTitle(true)" @blur="editTitle(false)" @keyup.enter="submitTitle()" @keyup.esc="submitTitle(true)" v-model.lazy.trim="title">
</div>
@ -128,6 +131,8 @@ export default {
</script>
<style lang="scss">
@import 'common/variables.scss';
.navigation-bar {
position: absolute;
width: 100%;
@ -141,19 +146,16 @@ export default {
float: right;
}
$navbar-button-color: rgba(255, 255, 255, 0.67);
$navbar-button-hover-background: #484848;
.navigation-bar__button {
display: inline-block;
width: 34px;
padding: 6px 5px;
padding: 6px;
}
.navigation-bar__title,
.navigation-bar__button {
display: inline-block;
color: $navbar-button-color;
color: $navbar-color;
background-color: transparent;
font-weight: 400;
}
@ -163,8 +165,8 @@ $navbar-button-hover-background: #484848;
&:active,
&:focus,
&:hover {
color: #fff;
background-color: $navbar-button-hover-background;
color: $navbar-hover-color;
background-color: $navbar-hover-background;
}
}
@ -199,4 +201,9 @@ $navbar-button-hover-background: #484848;
cursor: text;
}
}
.navigation-bar__spinner {
margin: 10px 5px 0;
color: rgba(255, 255, 255, 0.33);
}
</style>

View File

@ -8,6 +8,9 @@ $code-border-radius: 2px;
$link-color: #4a80cf;
$border-radius-base: 2px;
$hr-color: rgba(128, 128, 128, 0.2);
$navbar-color: rgba(255, 255, 255, 0.67);
$navbar-hover-color: #fff;
$navbar-hover-background: #484848;
$editor-color: rgba(0, 0, 0, 0.8);
$editor-color-light: rgba(0, 0, 0, 0.28);