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

Added pre-load animation.

Browse Source
This commit is contained in:
Tom Butcher 2025-12-27 16:35:37 +00:00
parent 309d825110
commit 919e6d192a
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -11,12 +11,15 @@
/> />
<link rel="apple-touch-icon" href="/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" href="/fonts/fonts.css" /> <link rel="stylesheet" href="/fonts/fonts.css" preload />
<link rel="stylesheet" href="/preload.css" preload />
<script type="module" src="/src/index.jsx"></script> <script type="module" src="/src/index.jsx"></script>
<title>Farm Control</title> <title>Farm Control</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root">
<div class="fc-preload"><div class="fc-loader"></div></div>
</div>
</body> </body>
</html> </html>

37
public/preload.css Normal file
View File

@ -0,0 +1,37 @@
.fc-preload {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: white;
}
}
/* 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);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
animation: l13 1s infinite linear;
}
@keyframes l13 {
100% {
transform: rotate(1turn);
}
}