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() {
$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') {

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

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