CODEWITHSUNDEEP
sass
Peter Boomsma
Peter Boomsma

Reputation: 9808

Condense classes and change properties

I have a donut chart that has 5 states (0 - 5). I'm using it in a Vue application, and the donut chart state changes depending on information.

I've created 5 classes to represent the 5 steps of the chart. Step 0 = 0%, step 1 = 20%, etc. The svg element takes a stroke-dasharray property, this shows how far the chart is filled.

So I created 5 css classes for the steps:

.donut-segment-0 {
    animation: donut0 1s;
}

@keyframes donut0{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 0, 100;
    }
}

.donut-segment-1 {
    animation: donut1 1s;
}

@keyframes donut1{
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 20, 80;
    }
}

.donut-segment-2 {
    animation: donut2 1s;
}

@keyframes donut2{
    0% {
        stroke-dasharray: 20, 80;
    }
    100% {
        stroke-dasharray: 40, 60;
    }
}

.donut-segment-3 {
    animation: donut3 1s;
}

@keyframes donut3{
    0% {
        stroke-dasharray: 40, 60;
    }
    100% {
        stroke-dasharray: 60, 40;
    }
}

.donut-segment-4 {
    animation: donut4 1s;
}

@keyframes donut4{
    0% {
        stroke-dasharray: 60, 40;
    }
    100% {
        stroke-dasharray: 80, 20;
    }
}

.donut-segment-5 {
    animation: donut5 1s;
}

@keyframes donut5{
    0% {
        stroke-dasharray: 80, 20;
    }
    100% {
        stroke-dasharray: 100, 00;
    }
}

I was wondering if it's possible to condese this a bit. There's a simple logic to it. In each step I change the stroke-daskarray with 20 and call a specific animation.

Upvotes: 0

Views: 18

Answers (1)

Peter Boomsma
Peter Boomsma

Reputation: 9808

Took me a bit of time but figured it out:

@for $i from 0 through 5 {
  .donut-step-#{$i} {
    animation: donut-#{$i} 1s;
  }

  @keyframes donut-#{$i} {
    0% {
        stroke-dasharray: ($i - 1) * 20, 100 - (($i - 1) * 20);
    }
    100% {
        stroke-dasharray: $i * 20, 100 - ($i * 20);
    }
  }
}

Upvotes: 1

Related Questions