c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Add custom loading animation

Browse Source
This commit is contained in:
Daniel Kluge 2023-04-13 19:43:35 +02:00
parent 9e9afa9970
commit 630c7fe53c
1 changed files with 1 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/img/loading.min.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" width="350" height="135" viewBox="-25 -5 350 135" xmlns="http://www.w3.org/2000/svg"><style>path{fill:none;}#b{fill:#1b1b1b;}#t,#l{stroke:#000;stroke-width:5px;stroke-dasharray:395.335;stroke-dashoffset:395.335;}#e{stroke:#a90000;stroke-width:15px;stroke-dasharray:318.656;stroke-dashoffset:318.656;stroke-linecap:square;}#d{fill:#a90000;}#d,#b,#c{fill-opacity:0;}#e,#d,#c{clip-path:path("M50 0H250V125H50Z");}#e,#d,#c{animation:e 5s linear infinite;}#b,#t,#l{animation:l 5s linear infinite;}@keyframes l{30%,60%{stroke-dashoffset:0;fill-opacity:0;}40%,50%{fill-opacity:1;}90%,100%{stroke-dashoffset:-395.335;fill-opacity:0;}}@keyframes e{30%{stroke-dashoffset:318.656;fill-opacity:0;}35%{fill-opacity:0;}45%{fill-opacity:0.7;}55%{fill-opacity:0.7;}60%,100%{fill-opacity:0;stroke-dashoffset:-318.656;}}</style><path d="M 0 0 H 200 C 250 0 250 0 300 125 H 100 C 50 125 50 125 0 0 Z" id="b" /><path d="M 208.76 0.03 C 243 49 210 114 150 115 C 95 115 55 53 91.26 0 Z" id="d" /><path d="M 208.76 0.03 C 243 49 210 114 150 115 C 95 115 55 53 91.26 0" id="e" /><circle cx="150" cy="40" r="40" id="c" fill="#000" /><path d="M -20 0 H 200 C 250 0 250 0 300 125" id="t" /><path d="M 320 125 H 100 C 50 125 50 125 0 0" id="l" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB