malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Added loading spinner to lightbox

Browse Source
This commit is contained in:
Tetrakern 2023-02-21 09:45:18 +01:00
parent 2928312199
commit 5758dcde25
4 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
footer.php
View File

@ -49,7 +49,7 @@
<?php
// Lightbox container
if ( get_option( 'fictioneer_enable_lightbox' ) ) {
echo '<div id="fictioneer-lightbox" class="lightbox"><button type="button" class="lightbox__close" aria-label="' . esc_attr__( 'Close lightbox', 'fictioneer' ) . '">' . fictioneer_get_icon( 'fa-xmark' ) . '</button><div class="lightbox__content target"></div></div>';
echo '<div id="fictioneer-lightbox" class="lightbox"><button type="button" class="lightbox__close" aria-label="' . esc_attr__( 'Close lightbox', 'fictioneer' ) . '">' . fictioneer_get_icon( 'fa-xmark' ) . '</button><i class="fa-solid fa-spinner fa-spin loader" style="--fa-animation-duration: .8s;"></i><div class="lightbox__content target"></div></div>';
}
// WordPress footer hook

10
src/scss/_lightbox.scss
View File

@ -32,4 +32,14 @@
max-width: calc(100vw - 2rem);
object-fit: contain;
}
.loader {
display: block;
width: fit-content;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}