improved stop/reload icon animations
This commit is contained in:
bmFtZQ
GitHub
parent
90151b3dc3
commit
d40c891858
2 changed files with 96 additions and 18 deletions
|
|
@ -1,11 +1,49 @@
|
||||||
<svg fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 468 20" xmlns="http://www.w3.org/2000/svg">
|
<svg fill="context-fill" fill-opacity="context-fill-opacity" height="20" width="468" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M465.5 2a.5.5 0 0 0-.5.5v2.234a8.006 8.006 0 0 0-6.219-2.732 8.005 8.005 0 0 0-7.508 10.068 8.006 8.006 0 0 0 8.772 5.862A8.005 8.005 0 0 0 467 10a.5.5 0 0 0-1 0c0 3.517-2.6 6.48-6.086 6.94s-6.765-1.73-7.676-5.127a6.994 6.994 0 0 1 4.082-8.28A6.995 6.995 0 0 1 464.744 6H461.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5zM3.48 4a.5.5 0 0 0-.33.854L8.296 10 3.15 15.147a.5.5 0 0 0 .707.707l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707-.707L9.71 10l5.147-5.146a.5.5 0 0 0-.707-.708L9.003 9.293 3.857 4.146A.5.5 0 0 0 3.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L26.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L27.71 10l5.147-5.146a.5.5 0 0 0 0-.708A.5.5 0 0 0 32.48 4a.5.5 0 0 0-.33.146l-5.147 5.147-5.146-5.147A.5.5 0 0 0 21.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L44.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L45.71 10l5.147-5.146a.5.5 0 0 0 0-.708A.5.5 0 0 0 50.48 4a.5.5 0 0 0-.33.146l-5.147 5.147-5.146-5.147A.5.5 0 0 0 39.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L62.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L63.71 10l5.147-5.146a.5.5 0 0 0 0-.708A.5.5 0 0 0 68.48 4a.5.5 0 0 0-.33.146l-5.147 5.147-5.146-5.147A.5.5 0 0 0 57.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L80.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L81.71 10l4.803-4.803a.5.5 0 0 0 0-.707.5.5 0 0 0-.377-.146.5.5 0 0 0-.33.146l-4.803 4.803-5.146-5.147A.5.5 0 0 0 75.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L98.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L99.71 10l4.334-4.334a.5.5 0 0 0 0-.707.5.5 0 0 0-.376-.146.5.5 0 0 0-.33.146l-4.335 4.334-5.146-5.147A.5.5 0 0 0 93.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L116.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L117.711 10l3.615-3.615a.5.5 0 0 0 0-.707.5.5 0 0 0-.377-.147.5.5 0 0 0-.33.147l-3.616 3.615-5.146-5.147A.5.5 0 0 0 111.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L134.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L135.711 10l2.552-2.553a.5.5 0 0 0 0-.707.5.5 0 0 0-.377-.146.5.5 0 0 0-.33.146l-2.553 2.553-5.146-5.147A.5.5 0 0 0 129.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L152.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707L153.711 10l1.021-1.021a.5.5 0 0 0 0-.708.5.5 0 0 0-.377-.146.5.5 0 0 0-.33.146l-1.022 1.022-5.146-5.147A.5.5 0 0 0 147.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L170.296 10l-5.146 5.147a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l5.146-5.147 5.147 5.147a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-11-11A.5.5 0 0 0 165.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l10.78 10.78a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-10.781-10.78A.5.5 0 0 0 183.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l10.344 10.344a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708L201.857 4.146A.5.5 0 0 0 201.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l9.437 9.437a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-9.437-9.438A.5.5 0 0 0 219.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l8.344 8.343a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-8.344-8.343A.5.5 0 0 0 237.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l6.625 6.625a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708l-6.625-6.625A.5.5 0 0 0 255.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708l-4-4A.5.5 0 0 0 273.48 4zm18 0a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708l.453.453a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.707l-.453-.454A.5.5 0 0 0 291.48 4zm-107 10a.5.5 0 0 0-.33.146l-1 1a.5.5 0 0 0 0 .708.5.5 0 0 0 .707 0l1-1a.5.5 0 0 0 0-.708.5.5 0 0 0-.377-.146z"/>
|
<defs>
|
||||||
<path transform="rotate(142.16)" d="M-242.86-209.12a8.005 8.005 0 0 0-7.508 10.066c1.038 3.874 4.795 6.385 8.772 5.862s6.955-3.921 6.955-7.932a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5c0 3.517-2.6 6.48-6.086 6.94a6.992 6.992 0 0 1-7.674-5.128 6.994 6.994 0 0 1 4.082-8.279 6.993 6.993 0 0 1 8.74 2.967.5.5 0 0 0 .684.184.5.5 0 0 0 .183-.684 8.008 8.008 0 0 0-7.148-3.996z" style="opacity:.06"/>
|
<path id="line" d="M3.15 4.15a.5.5 0 0 1 .7 0l11 11a.5.5 0 0 1 0 .7.5.5 0 0 1-.7 0l-11-11a.5.5 0 0 1 0-.7z"/>
|
||||||
<path d="M445.61.78a.5.5 0 0 0-.38.596l.486 2.181a8.006 8.006 0 0 0-6.664-1.315 8.005 8.005 0 0 0-5.14 11.46 8.006 8.006 0 0 0 9.836 3.814 8.005 8.005 0 0 0 5.065-9.254.5.5 0 1 0-.976.217c.764 3.433-1.129 6.891-4.432 8.097s-6.98-.218-8.607-3.336a6.994 6.994 0 0 1 2.185-8.969 6.995 6.995 0 0 1 8.759.577l-3.167.705a.5.5 0 0 0 .218.976l3.904-.869a.5.5 0 0 0 .38-.597l-.87-3.904a.5.5 0 0 0-.597-.38z" style="opacity:.96"/>
|
<path id="circle" d="M9 2a8 8 0 1 0 8 8 .5.5 0 0 0-1 0 7 7 0 1 1-1-3.6l.5-1.1A8 8 0 0 0 9 2z"/>
|
||||||
<path d="M332.71 2.004a8.005 8.005 0 0 0-7.684 8.71.5.5 0 0 0 .543.454.5.5 0 0 0 .453-.543 6.993 6.993 0 0 1 5.442-7.455 6.995 6.995 0 0 1 8.103 4.422 6.995 6.995 0 0 1-3.326 8.611 6.99 6.99 0 0 1-8.738-1.875l.34-.031a.5.5 0 0 0 .45-.545.5.5 0 0 0-.53-.453.5.5 0 0 0-.012.002l-1.494.136a.5.5 0 0 0-.453.542l.134 1.537a.5.5 0 0 0 .541.453.5.5 0 0 0 .456-.541l-.022-.258a8 8 0 0 0 7.014 2.777 8.008 8.008 0 0 0 6.578-10.7 8.01 8.01 0 0 0-7.795-5.243z" style="opacity:.18"/>
|
<path id="arrow" d="M15.5 2a.5.5 45 0 1 .5.5v4a.5.5 135 0 1-.5.5h-4a.5.5 45 0 1-.5-.5.5.5 135 0 1 .5-.5H15V2.5a.5.5 135 0 1 .5-.5z"/>
|
||||||
<path d="M350.79 2.002a8.008 8.008 0 0 0-7.219 5.027.5.5 0 0 0 .278.65.5.5 0 0 0 .65-.279 6.993 6.993 0 0 1 8.228-4.181 6.99 6.99 0 0 1 5.221 7.61A6.995 6.995 0 0 1 351.083 17a6.99 6.99 0 0 1-6.97-5.773l.657.244a.5.5 0 0 0 .643-.295.5.5 0 0 0-.295-.643l-1.746-.648a.5.5 0 0 0-.176-.031.5.5 0 0 0-.457.302l-.699 1.62a.5.5 0 0 0 .262.658.5.5 0 0 0 .656-.262l.228-.53a8 8 0 0 0 5.045 5.864c.895.33 1.861.506 2.864.494a8.008 8.008 0 0 0 7.847-7.053 8.006 8.006 0 0 0-8.152-8.945z" style="opacity:.32"/>
|
<mask id="x1"><path d="M5 3 2 6l12 11 2-2z"/></mask>
|
||||||
<path d="M368.82 2.004a7.977 7.977 0 0 0-4.688 1.65.5.5 0 0 0-.091.701.5.5 0 0 0 .7.092 6.994 6.994 0 0 1 9.212.604 6.994 6.994 0 0 1 .603 9.21 6.996 6.996 0 0 1-9.054 1.801 6.987 6.987 0 0 1-3.067-8.459l.826.981a.5.5 0 0 0 .705.059.5.5 0 0 0 .059-.706l-1.363-1.613a.5.5 0 0 0-.364-.178.5.5 0 0 0-.304.09l-1.776 1.239a.5.5 0 0 0-.125.697.5.5 0 0 0 .696.123l.478-.334a8.02 8.02 0 0 0 1.526 7.082c.6.74 1.34 1.385 2.209 1.887a8.008 8.008 0 0 0 10.348-2.06 8.003 8.003 0 0 0-.692-10.526 7.988 7.988 0 0 0-5.838-2.34z" style="opacity:.46"/>
|
<mask id="x2"><path d="M5 4 3 6l11 11 2-2z"/></mask>
|
||||||
<path d="M386.96 1.998c-.486.002-.978.05-1.47.145a.5.5 0 0 0-.397.585.5.5 0 0 0 .586.397 6.995 6.995 0 0 1 7.963 4.67 6.994 6.994 0 0 1-3.59 8.504 6.994 6.994 0 0 1-8.9-2.448 6.992 6.992 0 0 1 .683-8.57l.357 1.832a.5.5 0 0 0 .586.395.5.5 0 0 0 .397-.586l-.541-2.772a.5.5 0 0 0-.514-.404.5.5 0 0 0-.07.008l-2.809.533a.5.5 0 0 0-.398.584.5.5 0 0 0 .584.398l1.334-.252a8.012 8.012 0 0 0-1.574 6.707 7.96 7.96 0 0 0 1.129 2.676A8.009 8.009 0 0 0 390.49 17.2a8.007 8.007 0 0 0 4.101-9.72 8.01 8.01 0 0 0-7.63-5.481z" style="opacity:.61"/>
|
<mask id="x3"><path d="M6 5 4 7l10 10 2-2z"/></mask>
|
||||||
<path d="M402.29.496a.5.5 0 0 0-.447.264.5.5 0 0 0 .205.677l1.369.729a8.011 8.011 0 0 0-5.615 4.342 8.006 8.006 0 0 0 5.475 11.305 8.005 8.005 0 0 0 9.243-5.082 8.007 8.007 0 0 0-3.832-9.83.5.5 0 0 0-.673.212.5.5 0 0 0 .213.674 6.995 6.995 0 0 1 3.351 8.602 6.99 6.99 0 0 1-8.086 4.447 6.996 6.996 0 0 1-5.467-7.44 6.994 6.994 0 0 1 6.014-6.33l-.928 1.834a.5.5 0 0 0 .22.672.5.5 0 0 0 .671-.22l1.377-2.72a.5.5 0 0 0-.21-.665L402.518.555a.5.5 0 0 0-.229-.059z" style="opacity:.75"/>
|
<mask id="x4"><path d="M7 6 5 8l9 9 2-2z"/></mask>
|
||||||
<path d="M426.21.059a.5.5 0 0 0-.186.039.5.5 0 0 0-.267.654l.908 2.158a8.014 8.014 0 0 0-7-.18 8.006 8.006 0 0 0-2.97 12.203c2.47 3.16 6.91 4 10.364 1.963a8.006 8.006 0 0 0 3.301-10.02.5.5 0 0 0-.656-.265.5.5 0 0 0-.264.656 6.995 6.995 0 0 1-2.888 8.767 6.993 6.993 0 0 1-9.069-1.718 6.995 6.995 0 0 1 .518-9.217 6.99 6.99 0 0 1 8.724-1.014l-2.902 1.244a.5.5 0 0 0-.264.657.5.5 0 0 0 .657.263l3.73-1.597a.5.5 0 0 0 .264-.655L426.679.362a.5.5 0 0 0-.47-.304z" style="opacity:.88"/>
|
<mask id="x5"><path d="m9 7-3 3 8 7 2-2z"/></mask>
|
||||||
|
<mask id="x6"><path d="m10 9-2 2 6 6 2-2z"/></mask>
|
||||||
|
<mask id="x7"><path d="m14 14-1 1 2 2 1-1z"/></mask>
|
||||||
|
<mask id="x8"><path d="m15 15-1 1L2 4l1-1z"/></mask>
|
||||||
|
<mask id="x9"><path d="m15 14-2 2L2 5l2-2z"/></mask>
|
||||||
|
<mask id="x10"><path d="m14 13-2 2L2 5l2-2z"/></mask>
|
||||||
|
<mask id="x11"><path d="m13 12-2 2-9-9 2-2z"/></mask>
|
||||||
|
<mask id="x12"><path d="m11 10-2 2-7-7 2-2z"/></mask>
|
||||||
|
<mask id="x13"><path d="m9 7-3 3-4-5 2-2z"/></mask>
|
||||||
|
<mask id="x14"><path d="M5 4 3 6 2 5l2-2z"/></mask>
|
||||||
|
</defs>
|
||||||
|
<style>g,use{transform-origin:9px 10px}use[href*="#arrow"]{transform-origin:15px 5.5px}mask{mask-type:alpha}</style>
|
||||||
|
<use href="#line"/>
|
||||||
|
<use href="#line" transform="scale(-1 1)"/>
|
||||||
|
<svg x="18"><use href="#line"/><use href="#line" transform="scale(-1 1)"/></svg>
|
||||||
|
<svg x="36"><use href="#line"/><use href="#line" transform="scale(-1 1)"/></svg>
|
||||||
|
<svg x="54"><use href="#line"/><use href="#line" transform="scale(-1 1)"/></svg>
|
||||||
|
<svg x="72"><use href="#line"/><use href="#line" transform="scale(-1 1)" mask="url(#x1)"/></svg>
|
||||||
|
<svg x="90"><use href="#line"/><use href="#line" transform="scale(-1 1)" mask="url(#x2)"/></svg>
|
||||||
|
<svg x="108"><use href="#line"/><use href="#line" transform="scale(-1 1)" mask="url(#x3)"/></svg>
|
||||||
|
<svg x="126"><use href="#line"/><use href="#line" transform="scale(-1 1)" mask="url(#x4)"/></svg>
|
||||||
|
<svg x="144"><use href="#line"/><use href="#line" transform="scale(-1 1)" mask="url(#x5)"/></svg>
|
||||||
|
<svg x="162"><use href="#line"/><use href="#line" transform="scale(-1 1)" mask="url(#x6)"/></svg>
|
||||||
|
<svg x="180"><use href="#line" transform="scale(-1 1)" mask="url(#x7)"/><use href="#line" mask="url(#x8)"/></svg>
|
||||||
|
<svg x="198"><use href="#line" mask="url(#x9)"/></svg>
|
||||||
|
<svg x="216"><use href="#line" mask="url(#x10)"/></svg>
|
||||||
|
<svg x="234"><use href="#line" mask="url(#x11)"/></svg>
|
||||||
|
<svg x="252"><use href="#line" mask="url(#x12)"/></svg>
|
||||||
|
<svg x="270"><use href="#line" mask="url(#x13)"/></svg>
|
||||||
|
<svg x="288"><use href="#line" mask="url(#x14)"/></svg>
|
||||||
|
<svg x="306"><use href="#circle" transform="rotate(142)" opacity=".06"/></svg>
|
||||||
|
<svg x="324"><g transform="rotate(175)" opacity=".18"><use href="#circle"/><use href="#arrow" transform="scale(.4)"/></g></svg>
|
||||||
|
<svg x="342"><g transform="rotate(-158)" opacity=".32"><use href="#circle"/><use href="#arrow" transform="scale(.5)"/></g></svg>
|
||||||
|
<svg x="360"><g transform="rotate(-127)" opacity=".46"><use href="#circle"/><use href="#arrow" transform="scale(.55)"/></g></svg>
|
||||||
|
<svg x="378"><g transform="rotate(-101)" opacity=".61"><use href="#circle"/><use href="#arrow" transform="scale(.7)"/></g></svg>
|
||||||
|
<svg x="396"><g transform="rotate(-63)" opacity=".75"><use href="#circle"/><use href="#arrow" transform="scale(.8)"/></g></svg>
|
||||||
|
<svg x="414"><g transform="rotate(-24)" opacity=".88"><use href="#circle"/><use href="#arrow" transform="scale(.9)"/></g></svg>
|
||||||
|
<svg x="432"><g transform="rotate(-13)" opacity=".96"><use href="#circle"/><use href="#arrow" transform="scale(.95)"/></g></svg>
|
||||||
|
<svg x="450"><use href="#circle"/><use href="#arrow"/></svg>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 3.8 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 3.8 KiB |
Loading…
Add table
Add a link
Reference in a new issue