git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading after qr click

Browse Source
This commit is contained in:
Pyae Bhone Zaw
2025-06-20 10:48:40 +06:30
parent 10f7276a4f
commit 1112d80fc4
1 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/views/layouts/_read_modal.html.erb
View File

@@ -140,8 +140,62 @@
opacity: 0.6;
cursor: not-allowed;
}
/* Loading Dot */
.processing-indicator {
display: flex;
gap: 6px;
justify-content: center;
}
.processing-dot {
width: 10px;
height: 10px;
background: #2196F3;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.processing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.processing-dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-12px);
}
}
#fullpage-loading {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.712);
align-items: center;
justify-content: center;
}
</style>
<div id="fullpage-loading" style="display:none; position:fixed; z-index:9999; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.35); align-items:center; justify-content:center;">
<div>
<div style="display:flex; gap:10px; justify-content:center;">
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="processing-dot"></div>
</div>
<div style="color:white; text-align:center; margin-top:1rem; font-size:1.2rem;">Please Wait...</div>
</div>
</div>
<div class="modal fade" id="read_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" >
<div class="modal-dialog read-dialog" role="document">
<div class="modal-content">
@@ -174,6 +228,11 @@
<img src="/image/mmqr.webp" width="100" height="100" />
</div>
<div class="payment-label text-center">Click here to pay with MMQR</div>
<div class="processing-indicator" style="display:none; margin: 1rem 0;">
<div class="processing-dot"></div>
<div class="processing-dot"></div>
<div class="processing-dot"></div>
</div>
</div>
<div class="text-center text-bold text-muted">
@@ -223,6 +282,11 @@ document.addEventListener('DOMContentLoaded', function () {
const disabledNfcCard = document.querySelector('.payment-card.disabled');
document.querySelector('.payment-card#dynamic_qr').addEventListener('click', function() {
document.getElementById('fullpage-loading').style.display = 'flex';
setTimeout(function() {
document.getElementById('fullpage-loading').style.display = 'none';
}, 5000);
initDynamicQrPay();
});