From 5254c9500c9ab68044d39087b03689138041c12d Mon Sep 17 00:00:00 2001
From: tanthammar <tinahammar@gmail.com>
Date: Wed, 5 Aug 2020 19:44:36 +0200
Subject: [PATCH] form spinner blade component

---
 .../components/spinners/button.blade.php      | 53 +++++++++++++++++++
 resources/views/form-layout.blade.php         |  2 +-
 src/FormServiceProvider.php                   |  1 +
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 resources/views/components/spinners/button.blade.php

diff --git a/resources/views/components/spinners/button.blade.php b/resources/views/components/spinners/button.blade.php
new file mode 100644
index 0000000..df5fcf7
--- /dev/null
+++ 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
index 1498bb4..75df8d9 100644
--- 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
index e56c9c1..20f41a7 100644
--- 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');