vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Add migration in progress animation
continuous-integration/drone/push Build is passing Details

This commit is contained in:
kolaente 2020-01-19 19:59:48 +01:00
parent c5885a08cb
commit bf562b89e6
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 75 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/migrator/wunderlist.vue
View File

@ -6,9 +6,23 @@
<p>To authorize Vikunja to access your Wunderlist Account, click the button below.</p>
<a :href="authUrl" class="button is-primary" :class="{'is-loading': migrationService.loading}" :disabled="migrationService.loading">Get Started</a>
</template>
<template v-else>
</template>
<div class="migration-in-progress-container" v-else>
<div class="migration-in-progress">
<img src="/images/migration/wunderlist.png" alt="Wunderlist Logo"/>
<div class="progress-dots">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<img src="/images/logo.svg" alt="Vikunja Logo">
</div>
<p>Migration in progress, hang tight...</p>
</div>
</div>
</template>

59
src/styles/components/migrator.scss
View File

@ -9,4 +9,61 @@
display: block;
}
}
}
}
.migration-in-progress-container {
max-width: 400px;
margin: 4em auto 0;
text-align: center;
}
.migration-in-progress {
text-align: center;
display: flex;
max-width: 400px;
justify-content: space-between;
align-items: center;
margin-bottom: 2em;
img {
display: block;
max-height: 100px;
}
.progress-dots {
height: 40px;
width: 140px;
overflow: visible;
span {
transition: all 500ms ease;
background: $grey;
height: 10px;
width: 10px;
display: inline-block;
border-radius: 10px;
animation: wave 2s ease infinite;
margin-right: 5px;
&:nth-child(1){ animation-delay: 0; }
&:nth-child(2){ animation-delay: 100ms; }
&:nth-child(3){ animation-delay: 200ms; }
&:nth-child(4){ animation-delay: 300ms; }
&:nth-child(5){ animation-delay: 400ms; }
&:nth-child(6){ animation-delay: 500ms; }
&:nth-child(7){ animation-delay: 600ms; }
&:nth-child(8){ animation-delay: 700ms; }
}
}
@keyframes wave{
0%, 40%, 100% {
transform: translate(0, 0);
background-color: $primary;
}
10% {
transform: translate(0, -15px);
background-color: $primary-dark;
}
}
}