scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Loader for extension popup

Browse source 
Pretty sure this isn't going to do anything at all
This commit is contained in:
Ben Grant 2021-04-20 20:09:11 +10:00
parent 3527b1cde0
commit 7ae6226a2f
3 changed files with 39 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
/graphics /graphics
.DS_Store .DS_Store
/crabfit-browser-extension/*.zip

2
crabfit-browser-extension/manifest.json
View file

@ -1,7 +1,7 @@
{ {
"name": "Crab Fit", "name": "Crab Fit",
"description": "Enter your availability to find a time that works for everyone!", "description": "Enter your availability to find a time that works for everyone!",
"version": "1.0", "version": "1.1",
"manifest_version": 2, "manifest_version": 2,
"author": "Ben Grant", "author": "Ben Grant",

37
crabfit-browser-extension/popup.html
View file

@ -9,6 +9,42 @@
margin: 0; margin: 0;
} }
@keyframes load {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#loader {
position: absolute;
top: 0;
left: 0;
width: 360px;
height: 500px;
background-color: #FFFFFF;
z-index: -1;
}
#loader::after {
content: '';
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
height: 24px;
width: 24px;
border: 3px solid #F79E00;
border-left-color: transparent;
border-radius: 100px;
animation: load .5s linear infinite;
}
@media (prefers-color-scheme: dark) {
#loader {
background-color: #111111;
}
}
iframe { iframe {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -17,6 +53,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="loader"></div>
<iframe src="https://crab.fit/create" allow="clipboard-write"></iframe> <iframe src="https://crab.fit/create" allow="clipboard-write"></iframe>
</body> </body>
</html> </html>