[BRANDING] Custom loading animation for Forgejo

(cherry picked from commit a3b3b8a2df)
(cherry picked from commit de0fd2d2e4)
(cherry picked from commit e1bf4de211)
(cherry picked from commit 60ffc88a47)
(cherry picked from commit 7d2beea9ca)
(cherry picked from commit 171eadb952)
(cherry picked from commit 5e81f75ed2)

Conflicts:
	templates/install.tmpl
	templates/post-install.tmpl
	templates/repo/migrate/migrating.tmpl
This commit is contained in:
Caesar Schinas 2022-12-25 02:35:04 -10:00 committed by Loïc Dachary
parent 50fcb885fe
commit 641c4a36c5
No known key found for this signature in database
GPG key ID: 992D23B392F9E4F2
6 changed files with 18 additions and 4 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

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>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

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" .}}

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>

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>