form spinner blade component

tanthammar · Aug 5, 2020 · 5254c95 · 5254c95
1 parent ca415ef
commit 5254c95
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/resources/views/components/spinners/button.blade.php b/resources/views/components/spinners/button.blade.php
@@ -0,0 +1,53 @@
+<svg focusable="false" width="1.5em" height="1.5em" stroke="currentColor" fill="currentColor" viewBox="0 0 64 64"
+    class="text-primary">
+    <g stroke-width="4" stroke-linecap="round">
+        <line y1="17" y2="29" transform="translate(32,32) rotate(180)">
+            <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(210)">
+            <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(240)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(270)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(300)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(330)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(0)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(30)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(60)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(90)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(120)">
+            <animate attributeName="stroke-opacity" dur="750ms" values=".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85"
+                repeatCount="indefinite"></animate>
+        </line>
+        <line y1="17" y2="29" transform="translate(32,32) rotate(150)">
+            <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1"
+                repeatCount="indefinite"></animate>
+        </line>
+    </g>
+</svg>
diff --git a/resources/views/form-layout.blade.php b/resources/views/form-layout.blade.php
@@ -30,7 +30,7 @@ class="text-gray-500">{{ trans(config('tall-forms.saved')) }}</span>
                 @endif
                 <x-button wire:click="saveAndStay" wire:loading.attr="disabled" color="positive">
                     <span class="mr-2" wire:loading wire:target="saveAndStay">
-                        <x-spinners.button /></span>
+                        <x-tall-spinner /></span>
                     @lang(config('tall-forms.save-and-stay'))
                 </x-button>
             </div>

diff --git a/src/FormServiceProvider.php b/src/FormServiceProvider.php
@@ -30,6 +30,7 @@ protected function bootViews()
     {
         $this->loadViewsFrom(__DIR__ . '/../resources/views', 'tall-forms');
         Blade::component('tall-forms::components.button', 'button');
+        Blade::component('tall-forms::components.spinners.button', 'tall-spinner');
         Blade::component('tall-forms::components.input', 'tall-input');
         Blade::component('tall-forms::components.checkbox', 'tall-checkbox');
         Blade::component('tall-forms::components.radio', 'tall-radio');