foster/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-25 08:59:31 -05:00
Code Issues Wiki Activity

[BRANDING] Custom loading animation for Forgejo

Browse source 
(cherry picked from commit a3b3b8a2df)
(cherry picked from commit de0fd2d2e4)
This commit is contained in:
Caesar Schinas 2022-12-25 02:35:04 -10:00 committed by Earl Warren
parent f63536538c
commit e1bf4de211
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> </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" .}} {{template "base/footer" .}}

2
templates/post-install.tmpl
View file

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