radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-15 19:30:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ease-in loading so it's less flickery

Browse Source
This commit is contained in:
Alexis Sellier
2021-05-18 16:20:05 +02:00
parent 793f4327f2
commit 8c6cd8df87
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Loading.svelte
+18 -1
View File
@@ -58,9 +58,26 @@
transform: scale(1.0);
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1.5s;
animation-timing-function: ease-in;
-webkit-animation: fadeIn 1.5s;
-webkit-animation-timing-function: ease-in;
}
@keyframes fadeIn {
0% { opacity: 0 }
100% { opacity: 1 }
}
@-webkit-keyframes fadeIn {
0% { opacity: 0 }
100% { opacity: 1 }
}
</style>
<div class="spinner" class:small class:center>
<div class="spinner fade-in" class:small class:center>
<div class="bounce1" style="background-color: var(--color-{color})"></div>
<div class="bounce2" style="background-color: var(--color-{color})"></div>
<div class="bounce3" style="background-color: var(--color-{color})"></div>