farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Preload Loader and Remove Unused CSS
Some checks reported errors
farmcontrol/farmcontrol-ui/pipeline/head Something is wrong with the build of this commit
Details

Browse Source 
- Added a new inline CSS style for a preload loader to enhance user experience during loading times.
- Introduced an SVG-based loader animation for visual feedback while the application is loading.
- Removed the obsolete preload.css file as its styles have been integrated into index.html.
This commit is contained in:
Tom Butcher 2026-09-25 21:16:16 +01:00
parent 4d7c6e9a4c
commit a6624b8a4c
2 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@ -12,14 +12,74 @@
<link rel="apple-touch-icon" href="./logo192.png" />
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./fonts/fonts.css" preload />
<link rel="stylesheet" href="./preload.css" preload />
<style>
.fc-preload {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* HTML: <div class="loader"></div> */
.fc-loader {
width: 35px;
aspect-ratio: 1;
}
.fc-loader svg {
width: 100%;
height: 100%;
}
.fc-loader svg path {
stroke-width: 7px;
stroke: #008eff;
}
</style>
<script type="module" src="/src/index.jsx"></script>
<title>Farm Control</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="fc-preload"><div class="fc-loader"></div></div>
<div id="rooot">
<div class="fc-preload">
<div class="fc-loader">
<svg
width="100%"
height="100%"
viewBox="0 0 64 64"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve"
class="th-icon"
style="
fill-rule: evenodd;
clip-rule: evenodd;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1.5;
"
>
<g>
<path
d="M32,5.131C46.829,5.131 58.869,17.171 58.869,32"
style="fill: none"
/>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 32 32"
to="360 32 32"
dur="1s"
repeatCount="indefinite"
/>
</g>
</svg>
</div>
</div>
</div>
</body>
</html>

26
public/preload.css
View File

@ -1,26 +0,0 @@
.fc-preload {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* HTML: <div class="loader"></div> */
.fc-loader {
width: 35px;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(farthest-side, #008eff 94%, #0000) top/6px 6px no-repeat,
conic-gradient(#0000 30%, #008eff);
mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
animation: l13 1s infinite linear;
}
@keyframes l13 {
100% {
transform: rotate(1turn);
}
}