Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Loading animation update

Browse Source
This commit is contained in:
ernstmul
2024-11-19 10:01:29 +01:00
parent 4ed586095b
commit 38bb11d14f
2 changed files with 228 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/onboarding/create-project/+page.svelte
+5 -1
View File
@@ -16,7 +16,7 @@
import { base } from '$app/paths';
let showCustomId = false;
let isLoading = false;
let isLoading = true;
let id: string;
let startAnimation = false;
let projectName = '';
@@ -72,6 +72,10 @@
<div class="page-container u-flex-vertical u-cross-child-center u-main-center u-cross-center">
{#if isLoading}
<button
on:click={() => {
startAnimation = !startAnimation;
}}>toggle</button>
<Loading {startAnimation} />
{:else}
<img
src/routes/(console)/onboarding/create-project/loading.svelte
+223 -55
View File
@@ -21,55 +21,69 @@
<div class="border-right" style="grid-row: 1 / 6; grid-column-start: 4; " />
<div class="border-right" style="grid-row: 1 / 6; grid-column-start: 5; " />
<div class="border-right" style="grid-row: 1 / 6; grid-column-start: 6; " />
<div class="border-right" style="grid-row: 1 / 6; grid-column-start: 7; " />
<div class="border-right" style="grid-row: 1 / 6; grid-column-start: 8; " />
<div class="border-right is-only-desktop" style="grid-row: 1 / 6; grid-column-start: 7; " />
<div class="border-right is-only-desktop" style="grid-row: 1 / 6; grid-column-start: 8; " />
<div class="border-bottom" style="grid-row-start: 1; grid-column: 1/10" />
<div class="border-bottom" style="grid-row-start: 2; grid-column: 1/10" />
<div class="border-bottom" style="grid-row-start: 3; grid-column: 1/10" />
<div class="border-bottom" style="grid-row-start: 4; grid-column: 1/10" />
<div class="border-bottom" style="grid-row-start: 1;" />
<div class="border-bottom" style="grid-row-start: 2;" />
<div class="border-bottom" style="grid-row-start: 3;" />
<div class="border-bottom" style="grid-row-start: 4;" />
<div class="vertical-fade-top" style="grid-row-start: 1; grid-column: 1/10" />
<div class="vertical-fade-bottom" style="grid-row-start: 5; grid-column: 1/10" />
<div class="vertical-fade-top" style="grid-row-start: 1; " />
<div class="vertical-fade-bottom" style="grid-row-start: 5; " />
<div class="horizontal-fade-left" style="grid-row: 1 / 6; grid-column-start: 1;" />
<div class="horizontal-fade-right" style="grid-row: 1 / 6; grid-column-start: 9;" />
<div class="horizontal-fade-right" style="grid-row: 1 / 6; " />
<div class="icon icon1" style="grid-row-start: 2; grid-column-start: 2">
<div class="icon icon1">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon1.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon2" style="grid-row-start: 2; grid-column-start: 4">
<div class="icon icon2">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon2.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon3" style="grid-row-start: 2; grid-column-start: 6">
<div class="icon icon3">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon3.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon4" style="grid-row-start: 2; grid-column-start: 8">
<div class="icon icon4">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon4.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon5" style="grid-row-start: 4; grid-column-start: 4">
<div class="icon icon5">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon5.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon6" style="grid-row-start: 4; grid-column-start: 6">
<div class="icon icon6">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon6.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon7">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon6.svg`} alt="" />
</div>
</div>
</div>
<div class="icon icon8">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/icon6.svg`} alt="" />
@@ -77,7 +91,7 @@
</div>
</div>
<div class="appwrite" style="grid-row-start: 3; grid-column-start: 5">
<div class="appwrite">
<div class="icon-container">
<div class="icon-content">
<img src={`${base}/images/onboarding/appwrite.svg`} alt="" />
@@ -89,39 +103,54 @@
<style lang="scss">
.grid-container {
max-width: 100vw;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-fgcolor-neutral-primary, #2d2d31);
--cell-dimension: 40px;
--triple-cell-dimension: 120px;
--negative-cell-dimension: -40px;
--negative-triple-cell-dimension: -120px;
--icon-width: 16px;
--border-radius-container: 11px;
--border-radius-content: 7px;
--animation-type: ease-in-out;
--icon-colorize-animation-duration: 0.3s; // duration of icons going from gray to colorized
--icon-move-to-center-animation-duration: 0.8s; // duration of icons merging together
--icons-fade-out-animation-duration: 0.25s; //duration of icons disappearing animation
--welcome-to-appwrite-animation-duration: 0.8s; //duration of fading in the welcome to appwrite text
@media (min-width: 600px) {
--cell-dimension: 60px;
--triple-cell-dimension: 180px;
--negative-cell-dimension: -60px;
--negative-triple-cell-dimension: -180px;
--icon-width: 24px;
--border-radius-container: 16px;
--border-radius-content: 11px;
}
--icon-move-to-center-delay: calc(
var(--icon-colorize-animation-duration) + 0.5s
); //delay before the icons merging together is started
--icons-fade-out-delay: calc(
var(--icon-move-to-center-delay) + 0.4s
); // delay before icons start disappearing
--final-icon-fade-out-delay: calc(
var(--icons-fade-out-delay) + 0.4s
); //delay before the last icon start disappearing before the appwrite logo shows up
--appwrite-icon-fade-in-delay: calc(
var(--final-icon-fade-out-delay) + 0.05s
); //delay before the appwrite logo appears
--welcome-to-appwrite-delay: calc(var(--icon-move-to-center-delay) + 0.3s);
@media (min-width: 1023px) {
--cell-dimension: 75px;
--icon-width: 26px;
--border-radius-container: 17px;
--border-radius-content: 12px;
@media (min-width: 768px) {
--cell-dimension: 120px;
--triple-cell-dimension: 360px;
--negative-cell-dimension: -120px;
--negative-triple-cell-dimension: -360px;
--icon-width: 48px;
--border-radius-container: 32px;
--border-radius-content: 22px;
}
--half-cell-dimension: calc(var(--cell-dimension) * 0.5);
--double-cell-dimension: calc(var(--cell-dimension) * 2);
--triple-cell-dimension: calc(var(--cell-dimension) * 3);
--quadriple-cell-dimension: calc(var(--cell-dimension) * 4);
--negative-cell-dimension: calc(var(--cell-dimension) * -1);
--negative-double-cell-dimension: calc(var(--cell-dimension) * -2);
--negative-triple-cell-dimension: calc(var(--cell-dimension) * -3);
--negative-quadriple-cell-dimension: calc(var(--cell-dimension) * -4);
}
.static-loader {
z-index: 1;
@@ -130,7 +159,7 @@
align-items: center;
gap: 15px;
margin-bottom: 50px;
transition: opacity 0.5s ease-in;
transition: opacity 0.5s var(--animation-type);
}
.start-animation .static-loader {
opacity: 0;
@@ -142,19 +171,32 @@
}
.start-animation .title-container {
opacity: 1;
transition: opacity 0.5s ease-in 1.5s;
transition: opacity var(--welcome-to-appwrite-animation-duration) var(--animation-type)
var(--welcome-to-appwrite-delay);
}
.grid {
display: grid;
grid-template-columns: repeat(9, var(--cell-dimension));
grid-template-columns: 7px repeat(5, var(--cell-dimension)) 7px;
grid-template-rows: 180px repeat(4, var(--cell-dimension));
@media (min-width: 768px) {
grid-template-columns: repeat(9, var(--cell-dimension));
grid-template-rows: 180px repeat(4, var(--cell-dimension));
}
}
.icon {
transition: transform 0.5s ease-in 1s;
transition: transform var(--icon-move-to-center-animation-duration) var(--animation-type)
var(--icon-move-to-center-delay);
}
.appwrite {
opacity: 0;
grid-row-start: 3;
grid-column-start: 4;
@media (min-width: 768px) {
grid-row-start: 3;
grid-column-start: 5;
}
}
.border-right {
@@ -162,19 +204,35 @@
}
.border-bottom {
border-bottom: 1px solid #e4e4e7;
grid-column: 1/8;
@media (min-width: 768px) {
grid-column: 1/10;
}
}
.vertical-fade-top {
background: linear-gradient(to bottom, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
grid-column: 1/8;
@media (min-width: 768px) {
grid-column: 1/10;
}
}
.vertical-fade-bottom {
background: linear-gradient(to top, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
grid-column: 1/8;
@media (min-width: 768px) {
grid-column: 1/10;
}
}
.horizontal-fade-left {
background: linear-gradient(to right, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
}
.horizontal-fade-right {
background: linear-gradient(to left, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
grid-column-start: 7;
@media (min-width: 768px) {
grid-column-start: 9;
}
}
.icon-container {
@@ -190,7 +248,9 @@
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 13px 13px 0 rgba(0, 0, 0, 0.04);
opacity: 0.2;
transition: opacity 0.5s ease-in;
transition:
opacity var(--icon-colorize-animation-duration) var(--animation-type),
box-shadow var(--icon-colorize-animation-duration) var(--animation-type);
}
.icon-content {
@@ -204,7 +264,7 @@
justify-content: center;
align-items: center;
filter: grayscale(1);
transition: filter 0.5s ease-in;
transition: filter var(--icon-colorize-animation-duration) var(--animation-type);
img {
width: var(--icon-width);
@@ -216,40 +276,148 @@
}
.start-animation .icon1 {
transform: translateY(var(--cell-dimension)) translateX(var(--triple-cell-dimension));
transform: translateY(var(--cell-dimension)) translateX(var(--double-cell-dimension));
@media (min-width: 768px) {
transform: translateY(var(--cell-dimension)) translateX(var(--quadriple-cell-dimension));
}
}
.start-animation .icon2 {
transform: translateY(var(--cell-dimension)) translateX(var(--cell-dimension));
transform: translateY(var(--cell-dimension)) translateX(0);
@media (min-width: 768px) {
transform: translateY(var(--cell-dimension)) translateX(var(--double-cell-dimension));
}
}
.start-animation .icon3 {
transform: translateY(var(--cell-dimension)) translateX(var(--negative-cell-dimension));
transform: translateY(var(--cell-dimension))
translateX(var(--negative-double-cell-dimension));
@media (min-width: 768px) {
transform: translateY(var(--cell-dimension)) translateX(0);
}
}
.start-animation .icon4 {
transform: translateY(var(--cell-dimension))
translateX(var(--negative-triple-cell-dimension));
transform: translateY(var(--negative-cell-dimension))
translateX(var(--double-cell-dimension));
@media (min-width: 768px) {
transform: translateY(var(--cell-dimension))
translateX(var(--negative-double-cell-dimension));
}
}
.start-animation .icon5 {
transform: translateY(var(--negative-cell-dimension)) translateX(var(--cell-dimension));
transform: translateY(var(--negative-cell-dimension)) translateX(0);
@media (min-width: 768px) {
transform: translateY(var(--cell-dimension))
translateX(var(--negative-quadriple-cell-dimension));
}
}
.start-animation .icon6 {
transform: translateY(var(--negative-cell-dimension))
translateX(var(--negative-cell-dimension));
translateX(var(--double-cell-dimension));
}
.start-animation .icon:not(.icon6) .icon-content {
opacity: 0;
transition: opacity 0.1s ease-in 1.5s;
.start-animation .icon7 {
transform: translateY(var(--negative-cell-dimension)) translateX(0);
}
.start-animation .icon6 .icon-content {
.start-animation .icon8 {
transform: translateY(var(--negative-cell-dimension))
translateX(var(--negative-double-cell-dimension));
@media (min-width: 768px) {
transform: translateY(var(--negative-cell-dimension))
translateX(var(--negative-double-cell-dimension));
}
}
.start-animation .icon:not(.icon8) .icon-container {
box-shadow: 0 13px 13px 0 rgba(0, 0, 0, 0);
}
.start-animation .icon:not(.icon8) .icon-content {
opacity: 0;
transition: opacity 0.5s ease-in 2s;
transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
var(--icons-fade-out-delay);
}
.start-animation .icon8 .icon-content {
opacity: 0;
transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
var(--final-icon-fade-out-delay);
}
.start-animation .appwrite {
opacity: 1;
transition: opacity 0.5s ease-in 2s;
transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
var(--appwrite-icon-fade-in-delay);
}
.start-animation .icon-content {
filter: grayscale(0);
}
.icon1 {
grid-row-start: 2;
grid-column-start: 2;
@media (min-width: 768px) {
grid-row-start: 2;
grid-column-start: 1;
}
}
.icon2 {
grid-row-start: 2;
grid-column-start: 4;
@media (min-width: 768px) {
grid-row-start: 2;
grid-column-start: 3;
}
}
.icon3 {
grid-row-start: 2;
grid-column-start: 6;
@media (min-width: 768px) {
grid-row-start: 2;
grid-column-start: 5;
}
}
.icon4 {
grid-row-start: 4;
grid-column-start: 2;
@media (min-width: 768px) {
grid-row-start: 2;
grid-column-start: 7;
}
}
.icon5 {
grid-row-start: 4;
grid-column-start: 4;
@media (min-width: 768px) {
grid-row-start: 2;
grid-column-start: 9;
}
}
.icon6 {
display: none;
@media (min-width: 768px) {
display: block;
grid-row-start: 4;
grid-column-start: 3;
}
}
.icon7 {
display: none;
@media (min-width: 768px) {
display: block;
grid-row-start: 4;
grid-column-start: 5;
}
}
.icon8 {
grid-row-start: 4;
grid-column-start: 6;
@media (min-width: 768px) {
grid-row-start: 4;
grid-column-start: 7;
}
}
</style>