packages/styles/scss/components/_circle-chart.scss

   1 // be careful to udpate SVG if you want to update this value
   2 $stroke-width: 3px !default;
   3
   4 // this component is used for VPN
   5 // and for the moment on Angular/React sidebar
   6 .circle-chart {
   7         &-background {
   8                 stroke: var(--background-strong);
   9                 stroke-width: $stroke-width;
  10                 fill: transparent;
  11
  12                 &--bigger & {
  13                         stroke: var(--background-weak);
  14                 }
  15         }
  16
  17         &-circle {
  18                 stroke: var(--signal-success);
  19                 stroke-width: $stroke-width;
  20                 fill: transparent;
  21                 animation: anime-circle-chart-fill 2s reverse;
  22                 transform: rotate(-90deg);
  23                 transform-origin: center;
  24         }
  25
  26         &-percent {
  27                 fill: var(--text-norm);
  28         }
  29
  30         &-info {
  31                 color: var(--text-weak);
  32         }
  33
  34         .circle-bar--medium &-circle {
  35                 stroke: var(--signal-warning);
  36         }
  37
  38         .circle-bar--full &-circle {
  39                 stroke: var(--signal-danger);
  40         }
  41 }
  42
  43 @keyframes anime-circle-chart-fill {
  44         to {
  45                 stroke-dasharray: 0 100;
  46         }
  47 }