FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed and improved circular progess animation on about section (#850)

Browse source 
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
Augusto Pace 2023-12-29 18:04:27 +01:00 • committed by GitHub
parent 48a7b47319
commit d3968ca711
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
assets/styles/sections/about.scss
View file

@ -20,20 +20,25 @@ $progress-bar-colors: (
} }
@mixin circular-progress-animation-breakpoints() { @mixin circular-progress-animation-breakpoints() {
$progress: 50; $progress: 0;
$duration: 0; $duration: 0;
$delay: 1.8;
@for $i from 1 through 10 { @for $i from 0 through 20 {
.circular-progress-percentage-#{$progress} { .circular-progress-percentage-#{$progress} {
animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s; animation: circular-loading-#{$progress} #{$duration}s linear forwards 1.8s;
} }
.circular-progress-percentage-#{$progress}-delay {
animation-delay: #{$delay}s;
}
$progress: $progress + 5; $progress: $progress + 5;
$duration: $duration + 0.18; $duration: $duration + 0.18;
$delay: $duration + 1.8;
} }
} }
@mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) { @mixin circular-progress-animation-keyframes($progress, $degree, $keyframes) {
@for $i from 1 through $keyframes { @for $i from 0 through $keyframes {
@keyframes circular-loading-#{$progress} { @keyframes circular-loading-#{$progress} {
0% { 0% {
transform: rotate(0); transform: rotate(0);
@ -122,7 +127,6 @@ $progress-bar-colors: (
border-bottom-left-radius: 80px; border-bottom-left-radius: 80px;
border-right: 0; border-right: 0;
transform-origin: center right; transform-origin: center right;
animation: circular-loading-1 1.8s linear forwards;
} }
} }
.circular-progress-value { .circular-progress-value {
@ -144,8 +148,7 @@ $progress-bar-colors: (
} }
@include circular-progress-bar-color(); @include circular-progress-bar-color();
@include circular-progress-animation-breakpoints(); @include circular-progress-animation-breakpoints();
@include circular-progress-animation-keyframes($progress: 50, $degree: 0, $keyframes: 10); @include circular-progress-animation-keyframes($progress: 0, $degree: 0, $keyframes: 20);
@include circular-progress-animation-keyframes($progress: 1, $degree: 180, $keyframes: 5);
} }
@include media('<=large') { @include media('<=large') {

10
layouts/partials/misc/badge.html
View file

@ -12,10 +12,16 @@
{{ if hasPrefix .color "#"}} {{ if hasPrefix .color "#"}}
{{ $predefinedColor = false }} {{ $predefinedColor = false }}
{{ end }} {{ end }}
{{ $leftProgress := 0 }}
{{ $rightProgress := .percentage }}
{{ if ge .percentage 50 }}
{{ $rightProgress = 50 }}
{{ $leftProgress = sub .percentage 50 }}
{{ end }}
<div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}"> <div class="circular-progress {{if $predefinedColor}}{{ .color }}{{end}}">
<span class="circular-progress-left"> <span class="circular-progress-left">
<span <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 }} {{ if not $predefinedColor }}
style="border-color: {{.color}};" style="border-color: {{.color}};"
{{ end }} {{ end }}
@ -23,7 +29,7 @@
</span> </span>
<span class="circular-progress-right"> <span class="circular-progress-right">
<span <span
class="circular-progress-bar" class="circular-progress-bar circular-progress-percentage-{{ $rightProgress }}"
{{ if not $predefinedColor }} {{ if not $predefinedColor }}
style="border-color: {{.color}};" style="border-color: {{.color}};"
{{ end }} {{ end }}