From d3968ca711efbaa1e699e231ee72759db86c5c53 Mon Sep 17 00:00:00 2001
From: Augusto Pace <kyserbyte@gmail.com>
Date: Fri, 29 Dec 2023 18:04:27 +0100
Subject: [PATCH] Fixed and improved circular progess animation on about
 section (#850)

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 assets/styles/sections/about.scss | 15 +++++++++------
 layouts/partials/misc/badge.html  | 10 ++++++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/assets/styles/sections/about.scss b/assets/styles/sections/about.scss
index f3ba9740a..5f58333a2 100644
--- a/assets/styles/sections/about.scss
+++ b/assets/styles/sections/about.scss
@@ -20,20 +20,25 @@ $progress-bar-colors: (
 }
 
 @mixin circular-progress-animation-breakpoints() {
-  $progress: 50;
+  $progress: 0;
   $duration: 0;
+  $delay: 1.8;
 
-  @for $i from 1 through 10 {
+  @for $i from 0 through 20 {
     .circular-progress-percentage-#{$progress} {
       animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s;
     }
+    .circular-progress-percentage-#{$progress}-delay {
+        animation-delay: #{$delay}s;
+    }
     $progress: $progress + 5;
     $duration: $duration + 0.18;
+    $delay: $duration + 1.8;
   }
 }
 
 @mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) {
-  @for $i from 1 through $keyframes {
+  @for $i from 0 through $keyframes {
     @keyframes circular-loading-#{$progress} {
       0% {
         transform: rotate(0);
@@ -122,7 +127,6 @@ $progress-bar-colors: (
         border-bottom-left-radius: 80px;
         border-right: 0;
         transform-origin: center right;
-        animation: circular-loading-1 1.8s linear forwards;
       }
     }
     .circular-progress-value {
@@ -144,8 +148,7 @@ $progress-bar-colors: (
     }
     @include circular-progress-bar-color();
     @include circular-progress-animation-breakpoints();
-    @include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10);
-    @include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5);
+    @include circular-progress-animation-keyframes($progress: 0, $degree: 0, $keyframes: 20);
   }
 
   @include media('<=large') {
diff --git a/layouts/partials/misc/badge.html b/layouts/partials/misc/badge.html
index cfd8eeb78..a55eab4fb 100644
--- a/layouts/partials/misc/badge.html
+++ b/layouts/partials/misc/badge.html
@@ -12,10 +12,16 @@
     {{ if hasPrefix .color "#"}}
         {{ $predefinedColor = false }}
     {{ end }}
+    {{ $leftProgress := 0 }}
+    {{ $rightProgress := .percentage }}
+    {{ if ge .percentage 50 }}
+        {{ $rightProgress = 50 }}
+        {{ $leftProgress = sub .percentage 50 }}
+    {{ end }}
     <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
     <span class="circular-progress-left">
         <span
-        class="circular-progress-bar circular-progress-percentage-{{ .percentage }}"
+        class="circular-progress-bar circular-progress-percentage-{{ $leftProgress }}  circular-progress-percentage-50-delay"
         {{ if not $predefinedColor }}
             style="border-color: {{.color}};"
         {{ end }}
@@ -23,7 +29,7 @@
     </span>
     <span class="circular-progress-right">
         <span
-        class="circular-progress-bar"
+        class="circular-progress-bar circular-progress-percentage-{{ $rightProgress }}"
         {{ if not $predefinedColor }}
             style="border-color: {{.color}};"
         {{ end }}