improved proton download animations
This commit is contained in:
bmFtZQ
GitHub
parent
dc7e36f46e
commit
2262b8af6a
2 changed files with 62 additions and 170 deletions
|
|
@ -1,121 +1,41 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="540" height="20">
|
||||
<style>
|
||||
.arrow, .bar { fill: context-stroke; fill-opacity: context-stroke-opacity; }
|
||||
#circle { stroke: context-fill; stroke-opacity: context-fill-opacity; stroke-width: 1; stroke-linecap: round; fill: none; }
|
||||
.progress { fill: context-fill; fill-opacity: context-fill-opacity; }
|
||||
.check { stroke: context-fill; context-fill-opacity: context-fill-opacity; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; fill: none; }
|
||||
</style>
|
||||
<defs>
|
||||
<circle id="circle" r="8.5" cx="10" cy="10"/>
|
||||
<circle id="progress" class="progress" r="6.5" cx="10" cy="10"/>
|
||||
<path id="a" d="M10 2a.5.5 0 0 0-.5.5v11.8l-3.65-3.65a.5.5 0 0 0-.7.7l4.5 4.5a.5.5 0 0 0.7 0l4.5-4.5a.5.5 0 0 0-.7-.71l-3.65 3.65V2.5a.5.5 0 0 0-.5-.5z"/>
|
||||
<path id="b" d="M4.5 17.5h11"/>
|
||||
<circle id="c" cx="10" cy="10" r="8.5"/>
|
||||
<circle id="c2" cx="10" cy="10" r="6.5"/>
|
||||
<path id="d" d="m6.5 10 2.5 2.5 5-5"/>
|
||||
<pattern patternUnits="userSpaceOnUse" width="20" height="20" id="p"><use href="#c"/></pattern>
|
||||
<mask id="m1"><path d="m-1,6h10v9h-10v-8Z"/></mask>
|
||||
<mask id="m2"><path d="m2,6h10v8h-10v-8Z"/></mask>
|
||||
<mask id="m3"><path d="m4,6h10v8h-10v-8Z"/></mask>
|
||||
<mask id="m4"><path d="m4.5,6h10v8h-10v-8Z"/></mask>
|
||||
</defs>
|
||||
<g id="1">
|
||||
<use href="#circle"/>
|
||||
<use href="#progress"/>
|
||||
</g>
|
||||
<g id="2">
|
||||
<use href="#circle" x="20"/>
|
||||
<use href="#progress" x="20"/>
|
||||
</g>
|
||||
<g id="3">
|
||||
<use href="#circle" x="40"/>
|
||||
<use href="#progress" x="40"/>
|
||||
</g>
|
||||
<g id="4">
|
||||
<use href="#circle" x="60"/>
|
||||
<use href="#progress" x="60"/>
|
||||
</g>
|
||||
<g id="5">
|
||||
<use href="#circle" x="80"/>
|
||||
<use href="#progress" x="80"/>
|
||||
</g>
|
||||
<g id="6">
|
||||
<use href="#circle" x="100"/>
|
||||
<use href="#progress" x="100"/>
|
||||
</g>
|
||||
<g id="7">
|
||||
<use href="#circle" x="120"/>
|
||||
<use href="#progress" x="120"/>
|
||||
</g>
|
||||
<g id="8">
|
||||
<use href="#circle" x="140"/>
|
||||
<use href="#progress" x="140"/>
|
||||
</g>
|
||||
<g id="9">
|
||||
<use href="#circle" x="160"/>
|
||||
<circle class="progress" r="5.75" cx="170" cy="10"/>
|
||||
</g>
|
||||
<g id="10">
|
||||
<use href="#circle" x="180"/>
|
||||
<circle class="progress" r="4.25" cx="190" cy="10"/>
|
||||
</g>
|
||||
<g id="11">
|
||||
<use href="#circle" x="200"/>
|
||||
<circle class="progress" r="2.25" cx="210" cy="10"/>
|
||||
</g>
|
||||
<g id="12">
|
||||
<use href="#circle" x="220"/>
|
||||
<circle class="progress" r=".75" cx="230" cy="10"/>
|
||||
</g>
|
||||
<use href="#circle" x="240" id="13"/>
|
||||
<use href="#circle" x="260" id="14"/>
|
||||
<g id="15">
|
||||
<use href="#circle" x="280"/>
|
||||
<path class="check" d="m286.5 10 1.5 1.5"/>
|
||||
</g>
|
||||
<g id="16">
|
||||
<use href="#circle" x="300"/>
|
||||
<path class="check" d="m306.5 10 2.5 2.5 2-2"/>
|
||||
</g>
|
||||
<g id="17">
|
||||
<use href="#circle" x="320"/>
|
||||
<path class="check" d="m326.5 10 2.5 2.5 4-4"/>
|
||||
</g>
|
||||
<g id="18">
|
||||
<use href="#circle" x="340"/>
|
||||
<path class="check" d="m346.5 10 2.5 2.5 4.5-4.5"/>
|
||||
</g>
|
||||
<g id="19">
|
||||
<use href="#circle" x="360"/>
|
||||
<path class="check" d="m366.5 10 2.5 2.5 5-5"/>
|
||||
</g>
|
||||
<g id="20">
|
||||
<use href="#circle" x="380"/>
|
||||
<path class="check" d="m386.5 10 2.5 2.5 5-5"/>
|
||||
</g>
|
||||
<g id="21">
|
||||
<use href="#circle" x="400" style="opacity:.75"/>
|
||||
<path class="check" style="opacity:.9" d="m407.492 11.031 1.526 1.469 3.052-2.938"/>
|
||||
</g>
|
||||
<g id="22">
|
||||
<use href="#circle" x="420" style="opacity:.5"/>
|
||||
<path class="check" style="opacity:.75" d="m428.23 11.594.846.75 1.695-1.5"/>
|
||||
<path class="arrow" style="opacity:.5" d="M430.006 7.575c.05 0 .092.036.1.083v2.424l.743-.744a.102.102 0 0 1 .13-.012l.014.011c.035.036.04.09.012.13l-.012.015-.916.917a.103.103 0 0 1-.052.028l-.022.002a.103.103 0 0 1-.08-.04l-.91-.907a.102.102 0 0 1 .13-.156l.015.011.743.743V7.676c0-.056.046-.101.102-.101z"/>
|
||||
<path class="bar" d="M425.044 16a.5.5 0 0 1 .09.992l-.09.008h-.544a.5.5 0 0 1-.09-.992l.09-.008z"/>
|
||||
</g>
|
||||
<g id="23">
|
||||
<use href="#circle" x="440" style="opacity:.25"/>
|
||||
<path class="arrow" style="opacity:.75" d="M450.002 5.73c.11 0 .202.08.222.185l.01.04v5.302l1.638-1.64a.225.225 0 0 1 .287-.026l.03.026a.226.226 0 0 1 .027.286l-.026.031-2.02 2.023a.227.227 0 0 1-.114.062l-.048.004a.225.225 0 0 1-.178-.087l-2.003-2.001a.225.225 0 0 1 .286-.344l.031.026 1.639 1.636V5.955c0-.124.1-.224.224-.224z"/>
|
||||
<path class="bar" d="M446.762 16a.5.5 0 0 1 .09.992l-.09.008h-2.262a.5.5 0 0 1-.09-.992l.09-.008z"/>
|
||||
</g>
|
||||
<g id="24">
|
||||
<use href="#circle" x="460" style="opacity:.25"/>
|
||||
<path class="arrow" d="M470.001 3.918c.154 0 .282.111.309.258l.01.056v7.408l2.29-2.292a.314.314 0 0 1 .4-.036l.043.036a.313.313 0 0 1 .036.4l-.036.044-2.821 2.826a.31.31 0 0 1-.16.086l-.068.007a.314.314 0 0 1-.248-.122l-2.799-2.797a.314.314 0 0 1 .4-.48l.043.036 2.29 2.287V4.232c0-.173.14-.314.314-.314z"/>
|
||||
<path class="bar" d="M469.145 16.272a.5.5 0 0 1 .09.992l-.09.008h-4.645a.5.5 0 0 1-.09-.992l.09-.008z"/>
|
||||
</g>
|
||||
<g id="25">
|
||||
<use href="#circle" x="480" style="opacity:.25"/>
|
||||
<path class="arrow" d="M490 2.575a.41.41 0 0 1 .404.336l.01.074v9.671l2.99-2.992a.41.41 0 0 1 .522-.048l.056.048a.409.409 0 0 1 .047.523l-.047.057-3.683 3.69a.407.407 0 0 1-.21.112l-.087.008a.41.41 0 0 1-.324-.159l-3.655-3.65a.41.41 0 0 1 .523-.628l.056.047 2.99 2.986V2.984a.41.41 0 0 1 .41-.41z"/>
|
||||
<path class="bar" d="M492.458 16.513a.5.5 0 0 1 .09.992l-.09.008h-7.958a.5.5 0 0 1-.09-.992l.09-.008z"/>
|
||||
</g>
|
||||
<g id="26">
|
||||
<use href="#circle" x="500" style="opacity:.25"/>
|
||||
<path class="arrow" d="M510 2c.222 0 .406.16.444.37l.01.081v10.64l3.289-3.291a.451.451 0 0 1 .575-.053l.062.052a.45.45 0 0 1 .052.575l-.052.063-4.052 4.06a.447.447 0 0 1-.23.123l-.096.009a.45.45 0 0 1-.357-.175l-4.02-4.017a.451.451 0 0 1 .574-.69l.062.052 3.289 3.285V2.45c0-.25.202-.451.451-.451z"/>
|
||||
<path class="bar" d="M514.395 16.91a.5.5 0 0 1 .09.992l-.09.008h-9.895a.5.5 0 0 1-.09-.992l.09-.008z"/>
|
||||
</g>
|
||||
<g id="27">
|
||||
<use href="#circle" x="520" style="opacity:.25"/>
|
||||
<path class="arrow" d="M530 2a.5.5 0 0 1 .492.41l.01.09v11.794l3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .057.638l-.058.07-4.492 4.5a.496.496 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.194l-4.457-4.452a.5.5 0 0 1 .637-.766l.07.058 3.645 3.641V2.5a.5.5 0 0 1 .5-.5z"/>
|
||||
<path class="bar" d="M535.5 16.998a.5.5 0 0 1 .09.992l-.09.008h-11a.5.5 0 0 1-.09-.992l.09-.008z"/>
|
||||
</g>
|
||||
<style>*{transform-origin:10px;stroke-linecap:round;stroke-linejoin:round;mask-type:alpha}#a{fill:context-stroke;fill-opacity:context-stroke-opacity}#b{stroke:context-stroke;stroke-opacity:context-stroke-opacity;stroke-dasharray:13,14}#c,#d{stroke:context-fill;stroke-opacity:context-fill-opacity;fill:none}#d{stroke-width:1.3}#c2{fill:context-fill;fill-opacity:context-fill-opacity}</style>
|
||||
<rect width="400" height="20" fill="url(#p)"/>
|
||||
<use href="#c2"/>
|
||||
<svg x="20"><use href="#c2"/></svg>
|
||||
<svg x="40"><use href="#c2"/></svg>
|
||||
<svg x="60"><use href="#c2"/></svg>
|
||||
<svg x="80"><use href="#c2"/></svg>
|
||||
<svg x="100"><use href="#c2"/></svg>
|
||||
<svg x="120"><use href="#c2"/></svg>
|
||||
<svg x="140"><use href="#c2"/></svg>
|
||||
<svg x="160"><use href="#c2" transform="scale(.9)"/></svg>
|
||||
<svg x="180"><use href="#c2" transform="scale(.7)"/></svg>
|
||||
<svg x="200"><use href="#c2" transform="scale(.4)"/></svg>
|
||||
<svg x="220"><use href="#c2" transform="scale(.1)"/></svg>
|
||||
<svg x="280"><use href="#d" mask="url(#m1)"/></svg>
|
||||
<svg x="300"><use href="#d" mask="url(#m2)"/></svg>
|
||||
<svg x="320"><use href="#d" mask="url(#m3)"/></svg>
|
||||
<svg x="340"><use href="#d" mask="url(#m4)"/></svg>
|
||||
<svg x="360"><use href="#d"/></svg>
|
||||
<svg x="380"><use href="#d"/></svg>
|
||||
<svg x="400"><use href="#c" style="opacity:.75"/><use href="#d" transform="scale(.7) translate(0,1)"/></svg>
|
||||
<svg x="420"><use href="#c" style="opacity:.5"/><use href="#d" transform="scale(.4) translate(0,4)"/><use href="#a" transform="scale(.2)"/><use href="#b" stroke-dashoffset="12.5"/></svg>
|
||||
<svg x="440"><use href="#c" style="opacity:.25"/><use href="#d" transform="scale(.2) translate(0,10)"/><use href="#a" transform="scale(.5)"/><use href="#b" stroke-dashoffset="11"/></svg>
|
||||
<svg x="460"><use href="#c" style="opacity:.25"/><use href="#a" transform="scale(.6)"/><use href="#b" stroke-dashoffset="9"/></svg>
|
||||
<svg x="480"><use href="#c" style="opacity:.25"/><use href="#a" transform="scale(.8)"/><use href="#b" stroke-dashoffset="5"/></svg>
|
||||
<svg x="500"><use href="#c" style="opacity:.25"/><use href="#a" transform="scale(.9)"/><use href="#b" stroke-dashoffset="4"/></svg>
|
||||
<svg x="520"><use href="#c" style="opacity:.25"/><use href="#a"/><use href="#b"/></svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 2.9 KiB |
Loading…
Add table
Add a link
Reference in a new issue