jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): updated spinner/loader

Browse source
This commit is contained in:
Shekar Siri 2023-10-25 17:16:56 +02:00
parent 7c0cbc834a
commit efe99577b3
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/app/svg/openreplay-preloader.svg
View file

@ -1,7 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55" fill="none" height="55" width="55"><style>
@keyframes uro78awc4tzn00dgpjdreb25_t { 0% { transform: translate(27.5px,27.5px) rotate(0deg) scale(1,1) translate(0px,0px); } 100% { transform: translate(27.5px,27.5px) rotate(355deg) scale(1,1) translate(0px,0px); } }
@keyframes uro78awc4tzn00dgpjdreb25_sw { 0% { stroke-width: 3px; } 100% { stroke-width: 3px; } }
@keyframes xsc8rs7q380bevvc8x83et5f_t { 0% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } 50% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } 100% { transform: translate(29.7px,27.5px) scale(1,1) translate(-15.2px,-18px); } }
@keyframes xsc8rs7q380bevvc8x83et5f_o { 0% { opacity: .1; } 50% { opacity: 1; } 100% { opacity: .1; } }
@keyframes xsc8rs7q380bevvc8x83et5f_d { 0% { d: path('M20.2,18L9.8,11.9L9.8,24.1L20.2,18ZM21.7,16.7C21.9,16.9,22.1,17.1,22.2,17.3C22.3,17.5,22.4,17.7,22.4,18C22.4,18.3,22.3,18.5,22.2,18.7C22.1,18.9,21.9,19.1,21.7,19.3L10.2,25.9C9.3,26.4,8,25.8,8,24.6L8,11.4C8,10.2,9.3,9.6,10.2,10.1L21.7,16.7Z'); } 50% { d: path('M23,18L6.9,8.7L6.9,27.3L23,18ZM25.2,16.1C25.5,16.3,25.8,16.5,26,16.9C26.2,17.2,26.3,17.6,26.3,18C26.3,18.4,26.2,18.8,26,19.1C25.8,19.5,25.5,19.7,25.2,19.9L7.5,30.2C6.1,31,4.1,30,4.1,28.2L4.1,7.8C4.1,6,6.1,5,7.5,5.8L25.2,16.1Z'); } 100% { d: path('M20.2,18L9.8,11.9L9.8,24.1L20.2,18ZM21.7,16.7C21.9,16.9,22.1,17.1,22.2,17.3C22.3,17.5,22.4,17.7,22.4,18C22.4,18.3,22.3,18.5,22.2,18.7C22.1,18.9,21.9,19.1,21.7,19.3L10.2,25.9C9.3,26.4,8,25.8,8,24.6L8,11.4C8,10.2,9.3,9.6,10.2,10.1L21.7,16.7Z'); } }
</style><ellipse stroke="#6070f8" stroke-width="3" stroke-dasharray="6 6" rx="25" ry="25" transform="translate(27.5,27.5)" style="animation: 1s linear infinite both uro78awc4tzn00dgpjdreb25_t, 1s linear infinite both uro78awc4tzn00dgpjdreb25_sw;"/><path d="M20.2 18l-10.4-6.1v12.2l10.4-6.1Zm1.5-1.3c.2 .2 .4 .4 .5 .6c.1 .2 .2 .4 .2 .7c0 .3-0.1 .5-0.2 .7c-0.1 .2-0.3 .4-0.5 .6l-11.5 6.6c-0.9 .5-2.2-0.1-2.2-1.3v-13.2c0-1.2 1.3-1.8 2.2-1.3l11.5 6.6Z" fill="#122af5" opacity=".1" transform="translate(29.7,27.5) translate(-15.2,-18)" style="animation: 1s linear infinite both xsc8rs7q380bevvc8x83et5f_t, 1s linear infinite both xsc8rs7q380bevvc8x83et5f_o, 1s linear infinite both xsc8rs7q380bevvc8x83et5f_d;"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><title>OpenReplay</title><style>
@keyframes hzaz4m07gsvqr93b72i3pfic_v { 0% { visibility: visible; animation-timing-function: steps(1); } 58.824% { visibility: hidden; animation-timing-function: steps(1); } 100% { visibility: hidden; animation-timing-function: steps(1); } }
@keyframes hzaz4m07gsvqr93b72i3pfic_do { 0% { stroke-dashoffset: 74px; } 5.882% { stroke-dashoffset: 74px; animation-timing-function: cubic-bezier(0,0,.6,1); } 35.294% { stroke-dashoffset: 0px; } 58.824% { stroke-dashoffset: 0px; } 100% { stroke-dashoffset: 0px; } }
@keyframes f047xdtu4lfmfhg7pu1gw9t8_v { 0% { visibility: hidden; animation-timing-function: steps(1); } 58.824% { visibility: visible; animation-timing-function: steps(1); } 100% { visibility: visible; animation-timing-function: steps(1); } }
@keyframes f047xdtu4lfmfhg7pu1gw9t8_do { 0% { stroke-dashoffset: 0px; } 58.824% { stroke-dashoffset: 0px; animation-timing-function: cubic-bezier(0,0,.6,1); } 88.235% { stroke-dashoffset: 74px; } 100% { stroke-dashoffset: 74px; } }
@keyframes nha8ijp3bcdrlz9dbhv4w0g9_t { 0% { transform: translate(8.4px,11px) scale(0,0) translate(-10.6px,-15px); animation-timing-function: cubic-bezier(0,0,.6,1); } 35.294% { transform: translate(8.4px,11px) scale(1.2,1.2) translate(-10.6px,-15px); animation-timing-function: cubic-bezier(0,0,1,1); } 58.824% { transform: translate(8.4px,11px) scale(1.2,1.2) translate(-10.6px,-15px); animation-timing-function: cubic-bezier(0,0,1,1); } 64.706% { transform: translate(8.4px,11px) scale(1.2,1.2) translate(-10.6px,-15px); animation-timing-function: cubic-bezier(0,0,.6,1); } 82.353% { transform: translate(8.4px,11px) scale(.5,.5) translate(-10.6px,-15px); animation-timing-function: cubic-bezier(0,0,.6,1); } 88.235% { transform: translate(8.4px,11px) scale(0,0) translate(-10.6px,-15px); } 100% { transform: translate(8.4px,11px) scale(0,0) translate(-10.6px,-15px); } }
</style><g transform="translate(10,8.6)"><path d="M0 0l22.9 11.4l-22.9 11.5Z" fill="none" stroke-linecap="round" stroke="#394eff" stroke-linejoin="round" stroke-width="3" stroke-dashoffset="74" stroke-dasharray="74" visibility="visible" style="animation: 1.7s linear infinite forwards hzaz4m07gsvqr93b72i3pfic_v, 1.7s linear infinite both hzaz4m07gsvqr93b72i3pfic_do;"/><path d="M0 0v22.9l22.9-11.5Z" fill="none" stroke-linecap="round" stroke="#394eff" stroke-linejoin="round" stroke-width="3" stroke-dasharray="74" visibility="hidden" style="animation: 1.7s linear infinite forwards f047xdtu4lfmfhg7pu1gw9t8_v, 1.7s linear infinite both f047xdtu4lfmfhg7pu1gw9t8_do;"/><path d="M13.8 14.4c.2 .1 .3 .3 .3 .6c0 .3-0.1 .5-0.3 .6l-5.7 3.3c-0.5 .3-1.1 0-1.1-0.6v-6.6c0-0.6 .6-0.9 1.1-0.6l5.7 3.3Z" fill="#3eaaaf" transform="translate(8.4,11) scale(0,0) translate(-10.6,-15)" style="animation: 1.7s linear infinite both nha8ijp3bcdrlz9dbhv4w0g9_t;"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB