diff --git a/src/App.vue b/src/App.vue
index e17f4b3..d8ed56f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,12 +44,12 @@
         <input type="checkbox" v-model="circles[3].loading" />
       </div>-->
       <div style="border: 1px solid red; display: inline-block">
-        <ve-progress :progress="progress" animation="rs 2000 2000" :legend-formatter="customFormatter" >
+        <ve-progress :progress="progress" animation="bounce 3000 300" :legend-formatter="customFormatter" :loading="loading" half >
           <template #legend>
             <span id="my-slot">Hello Circle</span>
           </template>
         </ve-progress>
-        <ve-progress
+<!--        <ve-progress
           :progress="progress"
           :determinate="determinate"
           :size="size"
@@ -67,7 +67,7 @@
           <template #legend-caption>
             <p>hello</p>
           </template>
-        </ve-progress>
+        </ve-progress>-->
       </div>
     </div>
   </div>
diff --git a/src/components/Circle/Circle.vue b/src/components/Circle/Circle.vue
index 7a2ccaf..dd3347d 100644
--- a/src/components/Circle/Circle.vue
+++ b/src/components/Circle/Circle.vue
@@ -54,6 +54,7 @@
       </g>
     </fade-in-transition>
     <circle
+      ref="circleProgress"
       class="ep-circle--progress"
       :class="animationClass"
       :r="radius"
diff --git a/src/components/Circle/CircleContainer.vue b/src/components/Circle/CircleContainer.vue
index 9bbb531..4c81645 100644
--- a/src/components/Circle/CircleContainer.vue
+++ b/src/components/Circle/CircleContainer.vue
@@ -257,6 +257,10 @@ g.ep-circle--container {
 
 .ep-circle--progress {
   animation-timing-function: ease-in-out;
+  &.ep-animation-playing {
+    // Workaround only required for older Apple systems and Safari browser
+    transition: none !important;
+  }
   &.animation__default {
     animation-name: ep-progress--init__default;
   }
diff --git a/src/components/Circle/HalfCircle.vue b/src/components/Circle/HalfCircle.vue
index 1d2bcd5..89dd9d3 100644
--- a/src/components/Circle/HalfCircle.vue
+++ b/src/components/Circle/HalfCircle.vue
@@ -47,6 +47,7 @@
       </g>
     </fade-in-transition>
     <path
+      ref="circleProgress"
       :stroke-width="options.thickness"
       class="ep-half-circle--progress ep-circle--progress"
       :class="animationClass"
diff --git a/src/components/Circle/circleMixin.js b/src/components/Circle/circleMixin.js
index a757f18..3ae9b43 100644
--- a/src/components/Circle/circleMixin.js
+++ b/src/components/Circle/circleMixin.js
@@ -13,6 +13,7 @@ export default {
   },
   data: () => ({
     isInitialized: false,
+    isAnimationPlaying: false,
   }),
   computed: {
     progress() {
@@ -44,6 +45,7 @@ export default {
 
     animationClass() {
       return [
+        this.isAnimationPlaying && "ep-animation-playing",
         `animation__${
           !this.options.loading && this.dataIsAvailable && this.isInitialized ? this.options.animation.type : "none"
         }`,
@@ -146,12 +148,32 @@ export default {
     getBounceInOffset() {
       return this.circumference - this.progressOffset < 100 ? this.progressOffset : this.progressOffset + 100;
     },
+    toggleIsAnimationPlaying() {
+      this.$nextTick(() => {
+        this.isAnimationPlaying = !this.isAnimationPlaying;
+      });
+    },
   },
   async mounted() {
+    const circle = this.$refs.circleProgress;
+    if (circle) {
+      // this is only required for older MacOS/IOS versions and Safari. On Apple system the transition is triggered
+      // right after initial animation causing the progress line rendered twice. So we track animation state to
+      // add/remove CSS transition properties
+      circle.addEventListener("animationstart", this.toggleIsAnimationPlaying, false);
+      circle.addEventListener("animationend", this.toggleIsAnimationPlaying, false);
+    }
     if (!this.options.loading) {
       // await initial delay before applying animations
       await wait(this.options.animation.delay);
     }
     this.isInitialized = true;
   },
+  unmounted() {
+    const circle = this.$refs.circleProgress;
+    if (circle) {
+      circle.removeEventListener("animationstart", this.toggleIsAnimationPlaying, false);
+      circle.removeEventListener("animationend", this.toggleIsAnimationPlaying, false);
+    }
+  },
 };
diff --git a/src/styles/animationsUsage.scss b/src/styles/animationsUsage.scss
deleted file mode 100644
index d2df172..0000000
--- a/src/styles/animationsUsage.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-.ep-circle--progress {
-  animation-timing-function: ease-in-out;
-  &.animation__default {
-    animation-name: ep-progress--init__default;
-  }
-  &.animation__rs {
-    animation-name: ep-progress--init__rs;
-  }
-  &.animation__bounce {
-    animation-name: ep-progress--init__bounce;
-  }
-  &.animation__reverse {
-    animation-name: ep-progress--init__reverse;
-  }
-  &.animation__loop {
-    animation-name: ep-progress--init__loop;
-  }
-}
-
-.ep-circle--loader {
-  &.animation__loading {
-    animation-name: ep-progress--loading, ep-progress--loading__rotation;
-    animation-iteration-count: infinite !important;
-    animation-duration: 2s, 1s;
-    animation-timing-function: ease-in-out, linear;
-  }
-}
-
-.ep-half-circle--loader {
-  &.animation__loading {
-    animation-name: ep-half-progress--loading;
-    animation-iteration-count: infinite !important;
-    animation-duration: 2s;
-    animation-timing-function: ease-in-out;
-  }
-}
-
-.ep-half-circle--empty, .ep-half-circle--empty__fill, .ep-circle--empty, .ep-circle--empty__fill {
-  &.ep-circle--nodata {
-    opacity: 0.5;
-  }
-}
-
-.ep-circle--progress__dot-container {
-  animation-timing-function: ease-in-out;
-  &.animation__rs {
-    animation-name: ep-dot--init__rs;
-  }
-  &.animation__bounce {
-    animation-fill-mode: forwards;
-    animation-name: ep-dot--init__disabled;
-  }
-  &.animation__reverse {
-    animation-name: ep-dot--init__reverse;
-  }
-  &.animation__loop {
-    animation-name: ep-dot--init__loop;
-  }
-  &.ep-half-circle-progress__dot{
-    &.animation__bounce {
-      animation-fill-mode: forwards;
-      animation-name: ep-dot--init__disabled;
-    }
-    &.animation__loop {
-      animation-fill-mode: forwards;
-      animation-name: ep-dot--init__disabled;
-    }
-  }
-}
-
-@include ep-progress--init__default(var(--ep-stroke-offset), var(--ep-circumference));
-@include ep-progress--init__rs(var(--ep-stroke-offset), var(--ep-circumference));
-@include ep-progress--init__bounce(
-                var(--ep-stroke-offset),
-                var(--ep-bounce-in-stroke-offset),
-                var(--ep-bounce-out-stroke-offset),
-                var(--ep-circumference)
-);
-@include ep-progress--init__reverse(
-                var(--ep-reverse-stroke-offset),
-                var(--ep-circumference),
-                var(--ep-double-circumference)
-);
-@include ep-progress--init__loop(
-                var(--ep-loop-stroke-offset),
-                var(--ep-circumference),
-                var(--ep-negative-circumference)
-);
-@include ep-progress--loading(var(--ep-loading-stroke-offset), var(--ep-circumference));
-@include ep-half-progress--loading(var(--ep-circumference));
-@include ep-progress--loading__rotation();
-@include ep-dot--init__rs(var(--ep-dot-start), var(--ep-dot-end), var(--ep-dot-360));