FlandreScarle7/Sakurairo_Vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vision Update

Browse Source
This commit is contained in:
染川 瞳
2022-01-17 12:32:22 +08:00
parent 5f3dbbb85e
commit ab98a50a5a
498 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
load_svg/ball.svg
+10
View File
@@ -0,0 +1,10 @@
<svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-disk">
<g transform="translate(50,50)">
<g ng-attr-transform="scale({{config.scale}})" transform="scale(0.6)">
<circle cx="0" cy="0" r="50" ng-attr-fill="{{config.c1}}" fill="#F13630"></circle>
<circle cx="0" ng-attr-cy="{{config.cy}}" ng-attr-r="{{config.r}}" ng-attr-fill="{{config.c2}}" cy="-28" r="15" fill="#FEE2D5" transform="rotate(312)">
<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 0 0;360 0 0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
</circle>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 740 B

load_svg/inload.svg
+65
View File
@@ -0,0 +1,65 @@
<svg class="lds-spinner" width="75px" height="75px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="rotate(0 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.9375s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(22.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(45 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.8125s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(67.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.6875s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(112.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(135 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5625s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(157.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.4375s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(202.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(225 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.3125s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(247.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.1875s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(292.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(315 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="-0.0625s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(337.5 50 50)">
<rect x="47" y="18" rx="2" ry="2" width="6" height="14" fill="#FE8C5B">
<animate attributeName="opacity" values="1;0" times="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

load_svg/outload.svg
+26
View File
@@ -0,0 +1,26 @@
<svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 500 500" preserveAspectRatio="xMidYMid" class="lds-stripe" style="background: #FEE2D5 none repeat scroll 0% 0%;">
<defs>
<pattern id="blah" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<g transform="translate(7.8 0)">
<g transform="rotate(20 50 50) scale(1.2)">
<rect x="-20" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="-10" y="-10" width="10" height="120" ng-attr-fill="{{config.c2}}" fill="#FEE2D5"></rect>
<rect x="0" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="10" y="-10" width="10" height="120" ng-attr-fill="{{config.c2}}" fill="#FEE2D5"></rect>
<rect x="20" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="30" y="-10" width="10" height="120" ng-attr-fill="{{config.c2}}" fill="#FEE2D5"></rect>
<rect x="40" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="50" y="-10" width="10" height="120" ng-attr-fill="{{config.c2}}" fill="#FEE2D5"></rect>
<rect x="60" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="70" y="-10" width="10" height="120" ng-attr-fill="{{config.c2}}" fill="#FEE2D5"></rect>
<rect x="80" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="90" y="-10" width="10" height="120" ng-attr-fill="{{config.c2}}" fill="#FEE2D5"></rect>
<rect x="100" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
<rect x="110" y="-10" width="10" height="120" ng-attr-fill="{{config.c1}}" fill="#FE8C5B"></rect>
</g>
<animateTransform attributeName="transform" type="translate" values="0 0;26 0" keyTimes="0;1" ng-attr-dur="{{config.speed}}s" repeatCount="indefinite" dur="1s"></animateTransform>
</g>
</pattern>
</defs>
<rect ng-attr-rx="{{config.r}}" ng-attr-ry="{{config.r}}" ng-attr-x="{{config.x}}" ng-attr-y="{{config.y}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.strokeWidth}}" ng-attr-width="{{config.width}}" ng-attr-height="{{config.height}}" fill="url(#blah)" rx="15" ry="15" x="5" y="36" stroke="#FE8C5B" stroke-width="5" width="90" height="28"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB