mirror/galene
1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-11-22 16:45:58 +01:00
Code Activity

Add media failed animation

Browse source
This commit is contained in:
Alexandre Iooss 2021-05-06 16:27:27 +02:00
parent 170f510adc
commit ec00502248
No known key found for this signature in database
GPG key ID: 6C79278F3FCDCC02
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/galene.css
View file

@ -889,6 +889,7 @@ h1 {
.media-failed { .media-failed {
opacity: 0.7; opacity: 0.7;
background: no-repeat center/50% 50% url("/media-failed.svg");
} }
.mirror { .mirror {

26
static/media-failed.svg Normal file
View file

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 64 16" xmlns="http://www.w3.org/2000/svg">
<g fill="#ececec">
<circle cx="8" cy="8" r="8"/>
<circle cx="32" cy="8" r="8"/>
<circle cx="56" cy="8" r="8"/>
</g>
<style>
circle {
animation: circleScale 1.5s infinite ease-in-out;
transform-origin: 8px 8px;
}
circle:nth-child(2) {
animation-delay: -1s;
transform-origin: 32px 8px;
}
circle:nth-child(3) {
animation-delay: -0.5s;
transform-origin: 56px 8px;
}
@keyframes circleScale {
0%, 80%, 100% { transform: scale(0.8); }
40% { transform: scale(1.0); }
}
</style>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 711 B