Version 3.0

basic/puff-load.svg

@@ -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>

load_svg/ball.svg

@@ -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>

load_svg/inload.svg

@@ -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>

load_svg/outload.svg

@@ -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>