fix: fixed missing spinner animation

Author: samuelOsborne

cypress/integration/load_animation.spec.js

@@ -12,8 +12,8 @@ context("Player component DOM check", () => {
   });
 
   it('Loads an animation with empty URL and spinner displays.', function () {
-    cy.get("#player-two .spinner")
-      .should("have.class", "spinner");
+    cy.get("#player-two .lf-spinner")
+      .should("have.class", "lf-spinner");
   });
 
   it('Loads an animation with invalid url.', function () {

example/components/Load.vue

@@ -13,7 +13,6 @@
       :showColorPicker="true"
       :loop="true"
       :autoplay="true"
-      style="width: 100%"
     ></lottie-vue-player>
 
     <lottie-vue-player
@@ -23,7 +22,6 @@
       :showColorPicker="true"
       :loop="true"
       :autoplay="true"
-      style="width: 100%; height: 400px"
     ></lottie-vue-player>
 
     <lottie-vue-player
@@ -33,7 +31,6 @@
       :showColorPicker="true"
       :loop="true"
       :autoplay="true"
-      style="width: 100%; height: 400px"
     ></lottie-vue-player>
 
     <lottie-vue-player
@@ -42,7 +39,6 @@
       :player-controls="true"
       :loop="false"
       :autoplay="false"
-      style="width: 100%; height: 400px"
     ></lottie-vue-player>
   </div>
 </template>

src/Controls.vue

@@ -7,7 +7,7 @@
         ? 'lf-fixed lf-mb-18 lf-sm:mb-0'
         : ''
     "
-    class="w-full lf-pin-b lf-pin-l lf-px-3 lf-py-6"
+    class="lf-w-full lf-pin-b lf-pin-l lf-px-3 lf-py-6"
   >
     <div class="lf-flex lf-justify-center lf-items-center lf-text-center">
       <!-- stop-->
@@ -223,7 +223,7 @@
               <input
                 @keyup="updateBackgroundColor"
                 v-model="backgroundColor"
-                class="w-full text-grey-dark lf-border lf-border-grey-light bg-white lf-px-3 lf-py-2 lf-rounded-md outline-none"
+                class="lf-w-full text-grey-dark lf-border lf-border-grey-light bg-white lf-px-3 lf-py-2 lf-rounded-md outline-none"
                 style="font-size: 100%; box-sizing: border-box"
                 type="text"
               />

src/Player.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="w-full lf-relative vue-lottie-player">
+    <div class="lf-w-full lf-relative vue-lottie-player">
         <div
             v-if="loading"
-            class="w-full lf-h-full lf-absolute lf-flex lf-justify-center lf-items-center"
+            class="lf-w-full lf-h-full lf-absolute lf-flex lf-justify-center lf-items-center"
         >
             <div class="lf-spinner"></div>
         </div>
@@ -129,8 +129,6 @@ export default {
     },
     methods: {
         togglePlayPause() {
-            console.log("called toggle play pause");
-            console.log(this.options.playing);
             if (this.options.playing) {
                 this.player.pause();
                 this.options.playing = false;
@@ -139,62 +137,15 @@ export default {
                 this.options.playing = true;
             }
         },
-        mounted() {
-            this.player = this.$refs.player;
-            this.player.addEventListener('ready', function () {
-                this.options.animation = this.player.getLottie();
-                this.loading = false;
-            }.bind(this));
-            this.player.addEventListener('complete', function () {
-                this.stop();
-            }.bind(this));
-            this.options.backgroundColor = this.backgroundColor;
-            this.options.speed = this.speed;
-            this.options.loop = this.loop;
-            this.options.playing = this.autoplay;
-        },
-        methods: {
-            togglePlayPause() {
-                if (this.options.playing) {
-                    this.player.pause();
-                    this.options.playing = false;
-                } else {
-                    this.player.play();
-                    this.options.playing = true;
-                }
-            },
-            toggleLoop() {
-                if (this.options.loop) {
-                    this.player.setLooping(false);
-                    this.options.loop = false;
-                } else {
-                    this.player.setLooping(true);
-                    this.options.loop = true;
-                    this.options.playing = true;
-                    this.player.play();
-                }
-            },
-            setPlayerSpeed(speed) {
-                this.player.setSpeed(speed);
-                this.$emit('setPlayerSpeed', speed);
-            },
-            stop() {
-                this.player.seek(1);
-                this.player.stop();
-                this.options.playing = false;
-            },
-            setBackgroundColor(color) {
-                this.options.backgroundColor = color;
-                this.$emit('setBackgroundColor', color);
-            },
-            toggleFullscreen() {
-                this.$emit('toggleFullscreen');
-            },
-            getLottie() {
-                return (this.options.animation);
-            },
-            getPlayerState() {
-                return (this.player.currentState);
+        toggleLoop() {
+            if (this.options.loop) {
+                this.player.setLooping(false);
+                this.options.loop = false;
+            } else {
+                this.player.setLooping(true);
+                this.options.loop = true;
+                this.options.playing = true;
+                this.player.play();
             }
         },
         setPlayerSpeed(speed) {
@@ -219,6 +170,42 @@ export default {
         getPlayerState() {
             return (this.player.currentState);
         }
+    },
+    mounted() {
+        this.player = this.$refs.player;
+        this.player.addEventListener('ready', function () {
+            this.options.animation = this.player.getLottie();
+            this.loading = false;
+        }.bind(this));
+        this.player.addEventListener('complete', function () {
+            this.stop();
+        }.bind(this));
+        this.options.backgroundColor = this.backgroundColor;
+        this.options.speed = this.speed;
+        this.options.loop = this.loop;
+        this.options.playing = this.autoplay;
+    },
+    setPlayerSpeed(speed) {
+        this.player.setSpeed(speed);
+        this.$emit('setPlayerSpeed', speed);
+    },
+    stop() {
+        this.player.seek(1);
+        this.player.stop();
+        this.options.playing = false;
+    },
+    setBackgroundColor(color) {
+        this.options.backgroundColor = color;
+        this.$emit('setBackgroundColor', color);
+    },
+    toggleFullscreen() {
+        this.$emit('toggleFullscreen');
+    },
+    getLottie() {
+        return (this.options.animation);
+    },
+    getPlayerState() {
+        return (this.player.currentState);
     }
 }
 </script>

src/lottie_player.css

@@ -129,6 +129,10 @@
   margin-bottom: 4.5rem;
 }
 
+.lf-w-full {
+  width: 100%;
+}
+
 .lf-min-w-6 {
   min-width: 1.5rem;
 }
@@ -254,10 +258,28 @@
   border-right-color: transparent;
   border-radius: 50%;
   margin: 0 auto;
-  -webkit-animation: rotate 0.8s linear infinite;
-  animation: rotate 0.8s linear infinite;
+  -webkit-animation: rotate .8s linear infinite;
+  animation: rotate .8s linear infinite;
   z-index: 1;
-  position: absolute;
+  position: absolute
+}
+
+@-webkit-keyframes rotate {
+  to {
+      -webkit-transform: rotate(1turn);
+      transform: rotate(1turn)
+  }
+}
+
+@keyframes rotate {
+  0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg)
+  }
+  to {
+      -webkit-transform: rotate(1turn);
+      transform: rotate(1turn)
+  }
 }
 
 #lf-range {
@@ -344,4 +366,4 @@
   .lf-sm\:mb-0 {
     margin-bottom: 0;
   }
-}
+}