[ADD] circle spinner

controllers/main.py

@@ -312,7 +312,7 @@ class PosSales(http.Controller):
     '''
         Create sale order from cart items values
     '''
-    def create_sale_from_cart(self, partner_id, cart_items, date_confirm, currency_id, pricelist_id, payment_term_id = None,):
+    def create_sale_from_cart(self, partner_id, cart_items, date_confirm, currency_id, pricelist_id, payment_term_id=None):
         return request.env['sale.order'].create({
             'partner_id': partner_id,
             'order_line': [[0, False, {

src/components/common/Spinner.vue

@@ -1,10 +1,24 @@
 <template lang="pug">
-    .spinner(v-if="type === 'wave'")
-        .spinner-rect.spinner-rect-1
-        .spinner-rect.spinner-rect-2
-        .spinner-rect.spinner-rect-3
-        .spinner-rect.spinner-rect-4
-        .spinner-rect.spinner-rect-5
+    .spinner
+        .spinner-wave(v-if="type === 'wave'")
+            .spinner-rect.spinner-rect-1
+            .spinner-rect.spinner-rect-2
+            .spinner-rect.spinner-rect-3
+            .spinner-rect.spinner-rect-4
+            .spinner-rect.spinner-rect-5
+        .spinner-circle(v-if="type === 'circle'")
+            .spinner-circle-1.spinner-child
+            .spinner-circle-2.spinner-child
+            .spinner-circle-3.spinner-child
+            .spinner-circle-4.spinner-child
+            .spinner-circle-5.spinner-child
+            .spinner-circle-6.spinner-child
+            .spinner-circle-7.spinner-child
+            .spinner-circle-8.spinner-child
+            .spinner-circle-9.spinner-child
+            .spinner-circle-10.spinner-child
+            .spinner-circle-11.spinner-child
+            .spinner-circle-12.spinner-child
 </template>
 
 <script>
@@ -18,32 +32,71 @@
 
 <style lang="sass">
     @import '../../assets/variables'
-    .spinner 
-        $rect-count: 5
-        $animation-duration: 1000ms
-        $delay-range: 400ms
-
-        width: 50px
-        height: 40px
-        text-align: center
-        font-size: 10px
-        margin: 40px auto
-
-        .spinner-rect
-            width: 5px
-            height: 100%
-            background: $app-main-color
-            margin: 0 3px 0 0
-            display: inline-block
-            animation: spinner-wave $animation-duration infinite ease-in-out
-
-        @for $i from 1 through $rect-count
-            .spinner-rect-#{$i}
-                animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
-
-        @keyframes spinner-wave
-            0%, 40%, 100%
-                transform: scaleY(0.4)
-            20%
-                transform: scaleY(1.0)
+    .spinner
+        .spinner-wave
+            $rect-count: 5
+            $animation-duration: 1000ms
+            $delay-range: 400ms
+
+            width: 50px
+            height: 40px
+            text-align: center
+            font-size: 10px
+            margin: 40px auto
+
+            .spinner-rect
+                width: 5px
+                height: 100%
+                background: $app-main-color
+                margin: 0 3px 0 0
+                display: inline-block
+                animation: spinner-rect-wave $animation-duration infinite ease-in-out
+
+            @for $i from 1 through $rect-count
+                .spinner-rect-#{$i}
+                    animation-delay: - $animation-duration + $delay-range / ($rect-count - 1) * ($i - 1)
+
+        .spinner-circle
+            $circle-count: 12
+            $animation-duration: 1200ms
+
+            margin: 40px auto
+            width: 40px
+            height: 40px
+            position: relative
+
+            .spinner-child
+                width: 100%
+                height: 100%
+                position: absolute
+                left: 0
+                top: 0
+            
+            .spinner-child:before
+                content: ''
+                display: block
+                margin: 0 auto
+                width: 15%
+                height: 15%
+                background: $app-main-color
+                border-radius: 100%
+                animation: spinner-circle-bounce $animation-duration infinite ease-in-out both
+            
+            @for $i from 2 through $circle-count
+                .spinner-circle#{$i}
+                    transform: rotate(360deg / $circle-count * ($i - 1))
+                .spinner-circle#{$i}:before
+                    animation-delay: - $animation-duration + $animation-duration / $circle-count * ($i - 1)
+    
+    @keyframes spinner-rect-wave
+        0%, 40%, 100%
+            transform: scaleY(0.4)
+        20%
+            transform: scaleY(1.0)
+
+    @keyframes spinner-circle-bounce
+        0%, 80%, 100%
+            transform: scale(0)
+        40%
+            transform: scale(1.0)
 </style>