Merge pull request #140 from setaman/extend-loader-props

Extend loader props

Author: setaman

.github/workflows/build.yml

@@ -20,7 +20,6 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 14.16
-      - run: git branch
       - run: npm ci
       - run: npm run build
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Sergej Atamantschuk
+Copyright (c) 2021 Sergej Atamantschuk
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -458,12 +458,15 @@ Boolean that forces loading state. The component provides an indeterminate loadi
 
 With this option defined as Object you can customize the loading circle that is shown in the states 
 [loading](#loading) and [determinate](#determinate). Accepted properties are [`color`](#color), [`thickness`](#thickness), [`line`](#line),
-[`lineMode`](#linemode) and `opactity`. `opacity` is specific for loading circle and can be any valid CSS opacity value. If the option is not specified, the loading circle replicates the progress circle with a 0.55 default value for `opacity`.
+[`lineMode`](#linemode), `duration` and `opactity`. `duration` and `opacity` are specific for loading circle.
+Any valid CSS opacity value can be set as `opacity`. `duration` specifies the speed of the loader animation
+If the `loader` option is not specified, the loading circle replicates the progress circle with a 0.55 default value for `opacity`
+and 1000 `duration`.
 
 ###### Example: 📜
 
 ```vue
-<ve-progress :loader="{ color: 'green', lineMode: 'in 10', opacity: '0.6' }" />
+<ve-progress :loader="{ color: 'green', lineMode: 'in 10', opacity: '0.6', duration: 1500 }" />
 ```
 
 <br>

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;
   }
 }