aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Add spinner to LoadingOverlay

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-31 22:41:26 +01:00
parent 6c410cad2e
commit b3befc2ba3
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/LoadingOverlay.jsx
View File

@ -1,15 +1,32 @@
import React from "react";
import PropTypes from "prop-types";
const spinnerStyle = {
border: "6px solid #f3f3f3",
borderTop: "6px solid #ffffff",
borderRadius: "50%",
width: "40px",
height: "40px",
animation: "spin 1s linear infinite",
marginBottom: "20px"
};
const LoadingOverlay = ({ message }) => (
<div style={{
position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
background: "rgba(0, 0, 0, 0.85)", display: "flex",
alignItems: "center", justifyContent: "center", textAlign: "center",
color: "white", fontSize: "20px", fontWeight: "bold",
alignItems: "center", justifyContent: "center", flexDirection: "column",
textAlign: "center", color: "white", fontSize: "20px", fontWeight: "bold",
zIndex: 100000
}}>
<div style={spinnerStyle}></div>
{message}
<style>{`
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`}</style>
</div>
);