tomekwojcik/hotpocket
1
0
Fork 0
Code Actions Releases 16 Wiki Activity

BTHLABS-62: Display progress in extension popup

Browse Source 
Co-authored-by: Tomek Wójcik <labs@tomekwojcik.pl>
Co-committed-by: Tomek Wójcik <labs@tomekwojcik.pl>
This commit is contained in:
Tomek Wójcik
2025-10-13 18:48:00 +00:00
committed by Tomek Wójcik
parent 8b86145519
commit 7b67a2f758
9 changed files with 200 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
services/extension/src/content/templates/popup.html
View File

@@ -58,6 +58,9 @@
.hotpocket-extension-popup .hotpocket-extension-popup-body > * {
margin: 0px;
}
.hotpocket-extension-popup .hotpocket-extension-popup-body > .hotpocket-extension-popup-loader {
margin: 0px auto;
}
.hotpocket-extension-popup .hotpocket-extension-popup-body strong {
font-weight: 600;
}
@@ -67,6 +70,33 @@
.hotpocket-extension-popup .hotpocket-extension-popup-message-error {
color: #EE6476;
}
.hotpocket-extension-popup-loader {
animation: hotpocket-extension-popup-loader-animation 1s infinite steps(12);
aspect-ratio: 1;
background:
linear-gradient(0deg ,rgb(240 240 240/50%) 30%,#0000 0 70%,rgb(240 240 240/100%) 0) 50%/8% 100%,
linear-gradient(90deg,rgb(240 240 240/25%) 30%,#0000 0 70%,rgb(240 240 240/75% ) 0) 50%/100% 8%;
background-repeat: no-repeat;
border-radius: 50%;
display: grid;
width: 32px;
}
.hotpocket-extension-popup-loader::before,
.hotpocket-extension-popup-loader::after {
background: inherit;
border-radius: 50%;
content: "";
grid-area: 1/1;
opacity: 0.915;
transform: rotate(30deg);
}
.hotpocket-extension-popup-loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
@keyframes hotpocket-extension-popup-loader-animation {
100% {transform: rotate(1turn)}
}
</style>
<div class="hotpocket-extension-popup">
<div class="hotpocket-extension-popup-header">