femsci/forgejo
femsci/forgejo
1
0
Fork 0
forked from NYANDEV/forgejo
Code Pull requests Activity

[BRANDING] Custom loading animation for Forgejo

Browse source 
(cherry picked from commit a3b3b8a2dfb31f3b8000f1bfeae63ef3190c211f)
(cherry picked from commit de0fd2d2e459aec24dae1293cc1f8f04069dedac)
(cherry picked from commit e1bf4de211a92a2f4645b3f34039749456a10ea3)
(cherry picked from commit 60ffc88a47a158fe4920f05875ea8d156eecaa70)
(cherry picked from commit f62a7e4975)
(cherry picked from commit fdadfb478a7e8e6393f23b0f74ea9bc5903d52d5)
(cherry picked from commit ed68e8622c)
(cherry picked from commit 34ebbc500d)
(cherry picked from commit 873be0b63c)
(cherry picked from commit 5d5b1e5ca4)
This commit is contained in:
Caesar Schinas 2022-12-25 02:35:04 -10:00 committed by Earl Warren
parent e5ad8fb32c
commit 3edf2412e6
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
6 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/failed.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

14
public/img/forgejo-loading.svg Normal file
View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212">
<style>
@keyframes draw-orange{0%{stroke-dashoffset:200}25%{stroke-dashoffset:200;stroke-width:0}50%{stroke-dashoffset:0;stroke-width:25}to{stroke-dashoffset:0}}@keyframes draw-red{0%{stroke-dashoffset:130;stroke-width:0}25%{stroke-dashoffset:0;stroke-width:25}50%,to{stroke-dashoffset:0}}@keyframes red-circle{0%{opacity:0}20%{opacity:0;stroke-width:0}25%{opacity:1;stroke-width:15}to{opacity:1}}@keyframes orange-circle{0%{opacity:0}45%{opacity:0;stroke-width:0}50%{opacity:1;stroke-width:15}to{opacity:1}}@keyframes fade{0%,90%{opacity:1}to{opacity:0}}circle,path{fill:none;stroke:#000;stroke-width:15}path{stroke-width:25}.orange{stroke:#f60}.red{stroke:#d40000}
</style>
<g transform="translate(6 6)">
<g style="animation:fade 2000ms ease-in-out 5ms infinite">
<path d="M58 168V70a50 50 0 0 1 50-50h20" class="orange" style="stroke-dasharray:200;stroke-dashoffset:200;animation:draw-orange 2000ms ease-out 5ms infinite"/>
<path d="M58 168v-30a50 50 0 0 1 50-50h20" class="red" style="stroke-dasharray:130;stroke-dashoffset:130;animation:draw-red 2000ms ease-out 5ms infinite"/>
<circle cx="142" cy="20" r="18" class="orange" style="opacity:0;animation:orange-circle 2000ms ease-out 5ms infinite"/>
<circle cx="142" cy="88" r="18" class="red" style="opacity:0;animation:red-circle 2000ms ease-out 5ms infinite"/>
</g>
<circle cx="58" cy="180" r="18" class="red"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/img/loading.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 12 KiB

2
templates/install.tmpl
View file

@ -346,5 +346,5 @@
</div>
</div>
</div>
<img class="gt-hidden" src="{{AssetUrlPrefix}}/img/loading.png"/>
<img class="gt-hidden" src="{{AssetUrlPrefix}}/img/forgejo-loading.svg" width="256" height="256"/>
{{template "base/footer" .}}

2
templates/post-install.tmpl
View file

@ -7,7 +7,7 @@
<div class="ui stackable middle very relaxed page grid">
<div id="repo_migrating" class="sixteen wide center aligned centered column">
<div>
<img src="{{AssetUrlPrefix}}/img/loading.png"/>
<img src="{{AssetUrlPrefix}}/img/forgejo-loading.svg" width="256" height="256" />
</div>
</div>
</div>

4
templates/repo/migrate/migrating.tmpl
View file

@ -9,12 +9,12 @@
<div class="ui stackable middle very relaxed page grid">
<div id="repo_migrating" class="sixteen wide center aligned centered column" task="{{.MigrateTask.ID}}">
<div>
<img src="{{AssetUrlPrefix}}/img/loading.png"/>
<img src="{{AssetUrlPrefix}}/img/forgejo-loading.svg" width="256" height="256" />
</div>
</div>
<div id="repo_migrating_failed_image" class="sixteen wide center aligned centered column gt-hidden">
<div>
<img src="{{AssetUrlPrefix}}/img/failed.png"/>
<span class="red">{{svg "octicon-git-pull-request-closed" 256 "ui red icon"}}</span>
</div>
</div>
</div>