Version 3.0

This commit is contained in:
染川 瞳 2025-03-23 11:13:53 +09:00
parent ce46fc0d84
commit 8b0687fb68
27 changed files with 37 additions and 101 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

37
basic/puff-load.svg Normal file
View File

@ -0,0 +1,37 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#808080">
<g fill="none" fill-rule="evenodd" stroke-width="2">
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="0s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="0s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
<circle cx="22" cy="22" r="1">
<animate attributeName="r"
begin="-0.9s" dur="1.8s"
values="1; 20"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.165, 0.84, 0.44, 1"
repeatCount="indefinite" />
<animate attributeName="stroke-opacity"
begin="-0.9s" dur="1.8s"
values="1; 0"
calcMode="spline"
keyTimes="0; 1"
keySplines="0.3, 0.61, 0.355, 1"
repeatCount="indefinite" />
</circle>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -1,10 +0,0 @@
<svg width="80px" height="80px" fill="var(--theme-skin-matching)" 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>

Before

Width:  |  Height:  |  Size: 773 B

View File

@ -1,65 +0,0 @@
<svg class="lds-spinner" width="75px" height="75px" fill="var(--theme-skin-matching)" 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>

Before

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,26 +0,0 @@
<svg width="80px" height="80px" fill="var(--theme-skin-matching)" 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>

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1016 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1016 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1020 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 968 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 960 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 958 B

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 912 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 826 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 966 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 954 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 960 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 948 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 702 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 648 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 578 B

After

Width:  |  Height:  |  Size: 746 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 580 B

After

Width:  |  Height:  |  Size: 754 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 764 B

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB