0

I'm creating a dashboard that displays my CPU and GPU load. It's a number that is refreshed every 5 seconds, and hence the jumps are very, sudden; like 0% -> 50%.

I've googled around trying to animate this jump, so it actually counts up 0 -> 1 -> .. -> 50 etc. The code below works flawlessly actually. The {{ itemValue('gpu_load') }} changes every 5 seconds.

<style>
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test {
  transition: --num 4s;
  counter-reset: num var(--num);
  --num: {{ itemValue('gpu_load') }};
}
    
.test::after {
  content: counter(num);
}
  
</style>  
<div class="test"></div>

HOWEVER; this is just one counter. I would like to make two. I thought I could just duplicate the above and just add '2' to everything, like so:

<style>
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test {
  transition: --num 4s;
  counter-reset: num var(--num);
  --num: {{ itemValue('goliath_system_gpu_load') }}
}
    
.test::after {
  content: counter(num);
}

@property --num2 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.test2 {
  transition: --num2 4s;
  counter-reset: num2 var(--num2);
  --num2: {{ itemValue('goliath_system_cpu_load') }}
}
    
.test2::after {
  content: counter(num2);
} 
</style>  
<div class="test"></div>
<div class="test2"></div>

So this also works, but only temporarily. Whenever I'm displaying this code, the browser (seemingly) crashes randomly with an "Error code: STATUS_ACCESS_VIOLATION".

I can't seem to figure out what causes this. I'm probably using something wrong?

B. Smit
  • 63
  • 1
  • 4

1 Answers1

0

You don't need to duplicate the CSS custom property. You can do like below:

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.main {
  transition: --num 4s;
}

.test {
  counter-reset: num var(--num);
  --num: {{ itemValue('goliath_system_gpu_load') }}
}

.test::after {
  content: counter(num);
}

.test2 {
  counter-reset: num2 var(--num);
  --num: {{ itemValue('goliath_system_cpu_load') }}
}
    
.test2::after {
  content: counter(num2);
} 

<div class="test  main"></div>
<div class="test2 main"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • But this would show the same counter twice right? I'm sorry that I didn't clarify that I try to display two counters with separate inputs (i.e. gpu_load and cpu_load) – B. Smit Dec 22 '20 at 12:08
  • @B.Smit think about scooping. The same name variable used in different element is a different one. It will be the same only if there is a child-parent relation – Temani Afif Dec 22 '20 at 13:34
  • Tahnk you for trying to help me! It worked for a little but it still crashes. I wonder if it has to do with Angular. The input are integers and never below zero (dont know if that would matter). – B. Smit Dec 22 '20 at 13:42
  • @B.Smit So I am pretty convinced it's not related to the CSS variables, you can probably try to create a full working code so we can see? – Temani Afif Dec 22 '20 at 19:25