apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): improve loading spinner

Browse source
This commit is contained in:
Julian Tölle 2020-06-05 01:21:27 +02:00
parent 5f8eacae7b
commit 42e8b886a0
6 changed files with 47 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/ReportListens.tsx
View file

@ -78,7 +78,7 @@ export const ReportListens: React.FC = () => {
</div>
{isLoading && (
<div>
<span>Loading Listens</span>
<div className="loader rounded-full border-8 h-64 w-64"></div>
</div>
)}
{report.length === 0 && (

23
frontend/src/loader.css Normal file
View file

@ -0,0 +1,23 @@
.loader {
border-top-color: theme("colors.green.500");
-webkit-animation: spinner 1.5s linear infinite;
animation: spinner 1.5s linear infinite;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

2
frontend/src/tailwind.css
View file

@ -1,3 +1,5 @@
@import "loader.css";
@tailwind base;
@tailwind components;