From c6f998a6aba5a6f59921411543a2f934f0a420fe Mon Sep 17 00:00:00 2001 From: ManjaroOne666 Date: Wed, 23 Jan 2019 12:44:34 +0000 Subject: [PATCH] loading text --- components/GalleryImageViewer.vue | 38 +++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) 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; + } +}