added spinner on form create/edit

This commit is contained in:
Jagad R R
2025-01-17 16:39:37 +07:00
parent f4a8972a1d
commit d497fe08a5
10 changed files with 302 additions and 10 deletions
@@ -21,11 +21,30 @@
</div>
</div>
</section>
<style>
#loading-spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
z-index: 9999; /* High z-index to cover everything */
display: flex;
justify-content: center;
align-items: center;
}
.spinner-wrapper {
text-align: center;
color: white;
}
</style>
<section class="content">
<div class="container-fluid">
<div class="card card-primary card-outline">
<div class="card-body">
<form method="POST" action="{{ route('forms.up-country.store') }}" enctype="multipart/form-data">
<form id="expense-form" method="POST" action="{{ route('forms.up-country.store') }}" enctype="multipart/form-data">
@csrf
@include('backend.layouts.partials.messages')
<div class="row">
@@ -91,6 +110,14 @@
<button type="submit" class="btn btn-primary ml-2">Submit</button>
</div>
</form>
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
</div>
<p>Submitting, please wait...</p>
</div>
</div>
</div>
</div>
</div>
@@ -128,5 +155,11 @@
decimalPlaces: 0, // Tidak ada angka desimal
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
});
document.getElementById('expense-form').addEventListener('submit', function (e) {
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
spinnerOverlay.classList.remove('d-none'); // Show overlay
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
});
</script>
@endsection
@@ -21,11 +21,30 @@
</div>
</div>
</section>
<style>
#loading-spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
z-index: 9999; /* High z-index to cover everything */
display: flex;
justify-content: center;
align-items: center;
}
.spinner-wrapper {
text-align: center;
color: white;
}
</style>
<section class="content">
<div class="container-fluid">
<div class="card card-primary card-outline">
<div class="card-body">
<form method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
<form id="expense-form" method="POST" action="{{ route('forms.up-country.update', $form->id) }}" enctype="multipart/form-data">
@csrf
@method('PUT')
@include('backend.layouts.partials.messages')
@@ -92,6 +111,14 @@
<button type="submit" class="btn btn-primary ml-2">Save</button>
</div>
</form>
<div id="loading-spinner-overlay" class="d-none">
<div class="spinner-wrapper">
<div class="spinner-border text-primary" role="status">
</div>
<p>Submitting, please wait...</p>
</div>
</div>
</div>
</div>
</div>
@@ -129,5 +156,11 @@
decimalPlaces: 0, // Tidak ada angka desimal
unformatOnSubmit: true // Nilai asli tanpa format saat dikirimkan
});
document.getElementById('expense-form').addEventListener('submit', function (e) {
const spinnerOverlay = document.getElementById('loading-spinner-overlay');
spinnerOverlay.classList.remove('d-none'); // Show overlay
spinnerOverlay.classList.add('d-flex'); // Use flexbox for centering
});
</script>
@endsection