feat: add loader animation duration option

Author: setaman

.github/workflows/build.yml

@@ -6,6 +6,7 @@ on:
       - master
       - dev
       - v2-dev
+      - extend-loader-props
   pull_request:
     branches:
       - master
@@ -19,7 +20,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16.05
+          node-version: 16
       - run: git branch
       - run: npm ci
       - run: npm run build
@@ -30,7 +31,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16.05
+          node-version: 16
       - run: git branch
       - run: npm ci
       - run: npm run lint
@@ -41,6 +42,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 16.05
+          node-version: 16
       - run: npm ci
       - run: npm run test

src/App.vue

@@ -55,7 +55,9 @@
           animation="default 1500 1000"
           :hide-legend="lineMode === 'in'"
           :legend="-123.1"
+          half
           font-size="2rem"
+          :loader="{ duration: 5500 }"
         >
           <template #legend>
             <img style="width: 50px; height: 50px" src="../public/vue_ellipse.png" />

src/components/Circle/CircleLoader.vue

@@ -13,8 +13,9 @@
       :style="{
         transition: 'all',
         transitionTimingFunction: styles.transitionTimingFunction,
-        transitionDuration: styles['animation-duration'],
+        transitionDuration: `${styles['animation-duration']}ms`,
         transformOrigin: styles.transformOrigin,
+        animationDuration: animationDurationStyle,
         '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
         '--ep-circumference': styles['--ep-circumference'],
       }"
@@ -39,6 +40,12 @@ export default {
     opacity() {
       return this.options.opacity && this.options.opacity >= 0 ? this.options.opacity : 0.55;
     },
+    animationDuration() {
+      return this.options.duration && this.options.duration >= 0 ? this.options.duration : 1000;
+    },
+    animationDurationStyle() {
+      return `${this.animationDuration * 2}ms, ${this.animationDuration}ms`;
+    },
     loaderColor() {
       return Array.isArray(this.options.loader.color.colors)
         ? `url(#ep-loader-gradient-${this.options.uid})`

src/components/Circle/HalfCircleLoader.vue

@@ -10,7 +10,9 @@
       :stroke-linecap="options.line"
       :style="{
         transitionTimingFunction: styles.transitionTimingFunction,
+        transitionDuration: `${styles['animation-duration']}ms`,
         transformOrigin: styles.transformOrigin,
+        animationDuration: animationDurationStyle,
         '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
         '--ep-circumference': styles['--ep-circumference'],
         '--ep-negative-circumference': styles['--ep-negative-circumference'],
@@ -38,6 +40,12 @@ export default {
     opacity() {
       return this.options.opacity && this.options.opacity >= 0 ? this.options.opacity : 0.55;
     },
+    animationDuration() {
+      return this.options.duration && this.options.duration >= 0 ? this.options.duration : 1000;
+    },
+    animationDurationStyle() {
+      return `${this.animationDuration}ms`;
+    },
     halfLoaderColor() {
       return Array.isArray(this.options.loader.color.colors)
         ? `url(#ep-loader-gradient-${this.options.uid})`

src/components/interface.js

@@ -17,7 +17,7 @@ const colorConfig = (defaultColor = "transparent") => ({
 
 const validateLoaderProps = (loaderOptions) =>
   Object.keys(loaderOptions).every((option) => {
-    if (option === "opacity") {
+    if (["opacity", "duration"].includes(option)) {
       return isValidNumber(loaderOptions[option]) && loaderOptions[option] >= 0;
     }
     return options[option].validator(loaderOptions[option]);
@@ -193,7 +193,7 @@ const options = {
     default: () => ({}),
     validator: (value) => {
       const propsAllowed = Object.keys(value).every((prop) =>
-        ["thickness", "color", "lineMode", "line", "opacity"].includes(prop)
+        ["thickness", "color", "lineMode", "line", "opacity", "duration"].includes(prop)
       );
       if (propsAllowed) {
         return validateLoaderProps(value);

src/styles/animationsUsage.scss

@@ -21,7 +21,7 @@
   &.animation__loading {
     animation-name: ep-progress--loading, ep-progress--loading__rotation;
     animation-iteration-count: infinite !important;
-    animation-duration: 2s, 1s !important;
+    animation-duration: 2s, 1s;
     animation-timing-function: ease-in-out, linear;
   }
 }
@@ -30,7 +30,7 @@
   &.animation__loading {
     animation-name: ep-half-progress--loading;
     animation-iteration-count: infinite !important;
-    animation-duration: 2s !important;
+    animation-duration: 2s;
     animation-timing-function: ease-in-out;
   }
 }