mirror of
https://github.com/Starlio-app/StarlioX
synced 2024-11-06 06:13:57 +03:00
add loading bar in gallery
This commit is contained in:
parent
87878315e5
commit
e62165dd51
3 changed files with 11 additions and 3 deletions
|
@ -48,7 +48,9 @@
|
||||||
<header class="header-row">
|
<header class="header-row">
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="preloader">
|
||||||
|
<lottie-player src="https://assets4.lottiefiles.com/datafiles/a3YH0ragZcwfKHS/data.json" background="transparent" speed="1" style="width: 600px; height: 600px;" loop autoplay></lottie-player>
|
||||||
|
</div>
|
||||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||||
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
<div class="toast-header">
|
<div class="toast-header">
|
||||||
|
@ -61,6 +63,7 @@
|
||||||
</div>
|
</div>
|
||||||
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
|
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||||
<script src="/static/scripts/gallery.js" type="application/javascript"></script>
|
<script src="/static/scripts/gallery.js" type="application/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -23,6 +23,7 @@ const myModal = new bootstrap.Modal('#Wallpaper', {
|
||||||
myModal.show()
|
myModal.show()
|
||||||
|
|
||||||
function Wallpaper(data) {
|
function Wallpaper(data) {
|
||||||
|
$(".preloader").fadeOut(0)
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
if (data[i].media_type === "image") {
|
if (data[i].media_type === "image") {
|
||||||
$(".header-row").append(`
|
$(".header-row").append(`
|
||||||
|
@ -60,7 +61,7 @@ function Wallpaper(data) {
|
||||||
<p>Author: <strong>${data[id - 1].copyright}</strong></p>
|
<p>Author: <strong>${data[id - 1].copyright}</strong></p>
|
||||||
<p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
|
<p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
|
||||||
<p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
|
<p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
|
||||||
`
|
`.replace("undefined", "Unknown")
|
||||||
title.innerHTML = `
|
title.innerHTML = `
|
||||||
<h5 class="modal-title">${data[id - 1].title}</h5>
|
<h5 class="modal-title">${data[id - 1].title}</h5>
|
||||||
`
|
`
|
||||||
|
@ -89,7 +90,7 @@ function Wallpaper(data) {
|
||||||
<p>Author: <strong>${data[id - 1].copyright}</strong></p>
|
<p>Author: <strong>${data[id - 1].copyright}</strong></p>
|
||||||
<p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
|
<p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
|
||||||
<p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
|
<p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
|
||||||
`
|
`.replace("undefined", "Unknown")
|
||||||
title.innerHTML = `
|
title.innerHTML = `
|
||||||
<h5 class="modal-title">${data[id].title}</h5>
|
<h5 class="modal-title">${data[id].title}</h5>
|
||||||
`
|
`
|
||||||
|
|
|
@ -19,4 +19,8 @@
|
||||||
.card-img-top {
|
.card-img-top {
|
||||||
object-fit: none;
|
object-fit: none;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
lottie-player {
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
Loading…
Reference in a new issue