Add a loading spinner to wall-display
Spinner GIF derived from https://loading.io/, using `apng2gif` to get correct transparency behavior
This commit is contained in:
parent
cf0127c5a8
commit
084f398d41
BIN
src/loading.gif
Normal file
BIN
src/loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
14
src/modal.css
Normal file
14
src/modal.css
Normal file
@ -0,0 +1,14 @@
|
||||
.modal {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#loadingSpinner {
|
||||
background-image: url(./loading.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
@ -7,6 +7,7 @@
|
||||
<title>Tool Reservations</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="modal" id="loadingSpinner"></div>
|
||||
<div id="calendar"></div>
|
||||
<script src="bundle-wall-display.js"></script>
|
||||
</body>
|
||||
|
@ -10,6 +10,7 @@ import { CalendarOptions } from '@fullcalendar/core';
|
||||
import { common_calendarOptions, main } from './common';
|
||||
|
||||
import './wall-display.html';
|
||||
import './modal.css';
|
||||
import './ios-fixes.css';
|
||||
|
||||
document.body.addEventListener('touchmove', (e) => e.preventDefault(), {
|
||||
@ -29,6 +30,12 @@ const calendarOptions: CalendarOptions = {
|
||||
};
|
||||
})
|
||||
: [],
|
||||
loading(isLoading: boolean) {
|
||||
const spinner = document.getElementById('loadingSpinner');
|
||||
if (spinner) {
|
||||
spinner.style.display = isLoading ? '' : 'none';
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const calendar = main(calendarOptions, !toolFilter);
|
||||
|
@ -4,6 +4,10 @@ const common = {
|
||||
mode: 'development',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
|
||||
type: 'asset/resource',
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
|
Loading…
Reference in New Issue
Block a user