diff --git a/components/GalleryImageViewer.vue b/components/GalleryImageViewer.vue
index ee970d5..bd50603 100644
--- a/components/GalleryImageViewer.vue
+++ b/components/GalleryImageViewer.vue
@@ -8,9 +8,13 @@
:style="backgroundStyle"
>
-
+
-
+
+ Loading
+
@@ -99,6 +103,7 @@ export default {
methods: {
setImages(url) {
this.displayImageUrl = null
+ this.showLoading = false
this.loadingTimeout = setTimeout(() => {
this.showLoading = true
}, 1000)
@@ -146,6 +151,21 @@ export default {
box-shadow: 2px 4px 12px -2px rgba($color__neutral-200, .4);
}
+.loading-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.text-loading {
+ font-size: 2rem;
+ color: $color__neutral-900;
+}
+
+.animation-pulse {
+ animation: pulse 3s infinite;
+}
+
@media (max-width: $bp__layout) {
.close-viewer {
position: absolute;
@@ -227,6 +247,10 @@ export default {
filter: blur(100px);
opacity: .3;
}
+
+ .loading-container {
+ padding-bottom: $gallery-thumbs-height;
+ }
}
.trans-image {
@@ -252,4 +276,14 @@ export default {
opacity: 0;
}
}
+
+@keyframes pulse {
+ 0%, 50%, 100% {
+ opacity: 1;
+ }
+
+ 80% {
+ opacity: 0.1;
+ }
+}