niu/kintone-plugin-docx
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

introduced modal loading spinner.

Browse Source
This commit is contained in:
Yoshihiro OKUMURA
2025-05-29 22:32:19 +09:00
parent 271e29ee33
commit 5bc9976566
4 changed files with 156 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/common/DynamicPortal.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import ReactDOM from 'react-dom';
import invariant from 'tiny-invariant';
interface DynamicPortalProps {
children: React.ReactNode;
}
const DynamicPortal: React.FC<DynamicPortalProps> = (props) => {
const { children } = props;
const [el] = React.useState(() => document.createElement('div'));
React.useEffect(() => {
const body = document.querySelector('body');
invariant(body, 'The body element is not available. Please ensure this code runs in a browser context.');
if (el.parentNode == null) {
body.appendChild(el);
}
return () => {
if (el.parentNode) {
el.parentNode.removeChild(el);
}
};
}, []);
return ReactDOM.createPortal(children, el);
};
export default DynamicPortal;

196
src/common/Loading.css
View File

@ -1,196 +0,0 @@
.loading {
margin: 100px auto;
font-size: 25px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: loadingKeyframes 1.1s infinite ease;
animation: loadingKeyframes 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes loadingKeyframes {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #000000,
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
1.8em -1.8em 0 0em #000000,
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7),
2.5em 0em 0 0em #000000,
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5),
2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
1.75em 1.75em 0 0em #000000,
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7),
0em 2.5em 0 0em #000000,
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5),
0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
-1.8em 1.8em 0 0em #000000,
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7),
-2.6em 0em 0 0em #000000,
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
-1.8em -1.8em 0 0em #000000;
}
}
@keyframes loadingKeyframes {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #000000,
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
1.8em -1.8em 0 0em #000000,
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.5),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7),
2.5em 0em 0 0em #000000,
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5),
2.5em 0em 0 0em rgba(0, 0, 0, 0.7),
1.75em 1.75em 0 0em #000000,
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.5),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7),
0em 2.5em 0 0em #000000,
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5),
0em 2.5em 0 0em rgba(0, 0, 0, 0.7),
-1.8em 1.8em 0 0em #000000,
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.5),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7),
-2.6em 0em 0 0em #000000,
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.2),
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.7),
-1.8em -1.8em 0 0em #000000;
}
}

117
src/common/Loading.module.css Normal file
View File

@ -0,0 +1,117 @@
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
.spinner-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
.spinner-container .spinner {
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #ffffff,
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0em #ffffff,
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
2.5em 0em 0 0em #ffffff,
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
1.75em 1.75em 0 0em #ffffff,
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
0em 2.5em 0 0em #ffffff,
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
-1.8em 1.8em 0 0em #ffffff,
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
-2.6em 0em 0 0em #ffffff,
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
-1.8em -1.8em 0 0em #ffffff;
}
}

14
src/common/Loading.tsx
View File

@ -1,8 +1,18 @@
import React from 'react';
import './Loading.css';
import DynamicPortal from './DynamicPortal';
import styles from './Loading.module.css';
const Loading: React.FC = () => {
return <div className="loading">Loading...</div>;
return (
<DynamicPortal>
<div className={styles.overlay}>
<div className={styles.spinnerContainer}>
<div className={styles.spinner}>Loading..</div>
</div>
</div>
</DynamicPortal>
);
};
export default Loading;