OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Pulse effect while SpeciesFacesPicker is loading

Browse source 
like the Skeleton elements!
This commit is contained in:
Emi Matchu 2021-02-03 01:27:16 -08:00
parent 27d4bed172
commit 8de85fbc63
1 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/ItemPage.js
View file

@ -1039,6 +1039,7 @@ function SpeciesFaceOption({
alt={speciesName} alt={speciesName}
width={50} width={50}
height={50} height={50}
data-is-loading={isLoading}
data-is-compatible={!isLoading && isCompatible} data-is-compatible={!isLoading && isCompatible}
className={css` className={css`
filter: saturate(90%); filter: saturate(90%);
@ -1050,6 +1051,11 @@ function SpeciesFaceOption({
opacity: 0.6; opacity: 0.6;
} }
&[data-is-loading="true"] {
animation: 0.8s linear 0s infinite alternate none running
pulse;
}
input:checked + * &[data-is-compatible="false"] { input:checked + * &[data-is-compatible="false"] {
opacity: 0.85; opacity: 0.85;
} }
@ -1058,6 +1064,16 @@ function SpeciesFaceOption({
opacity: 1; opacity: 1;
filter: saturate(110%); filter: saturate(110%);
} }
@keyframes pulse {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
/* Alt text for when the image fails to load! We hide it /* Alt text for when the image fails to load! We hide it
* while still loading though! */ * while still loading though! */
font-size: 0.75rem; font-size: 0.75rem;