Loading spinner CCV Terminals

by Slava

HTML

<div data-theme="light">

  <div class="loading-spinner size-default">
    <div class="donut-one"></div>
    <div class="donut-two"></div>
    <div class="spinner-track"></div>
  </div>
  
</div>

<div data-theme="dark" style="background:#191A1D;">

  <div class="loading-spinner size-default">
    <div class="donut-one"></div>
    <div class="donut-two"></div>
    <div class="spinner-track"></div>
  </div>
  
</div>

CSS

:root {
  /* colors: Dark */
  --dark-correct-bright: rgb(254 192 19);
  --dark-correct-dark-950: rgb(61 45 0);
  --dark-danger-bright: rgb(255 60 67);
  --dark-danger-dark-950: rgb(60 0 2);
  --dark-effects-contrast-shadow: rgb(18 19 21);
  --dark-effects-contrast-shadow-400-transparent: rgb(18 19 21 / 0.4);
  --dark-greys-dark-930: rgb(25 26 29);
  --dark-greys-white: rgb(255 255 255);
  --dark-greys-white-060-transparent: rgb(255 255 255 / 0.06);
  --dark-greys-white-500-transparent: rgb(255 255 255 / 0.5);
  --dark-primary-bright: rgb(3 149 255);
  --dark-success-bright: rgb(0 219 147);
  --dark-success-bright-250-transparent: rgb(0 219 147 / 0.25);
  --dark-success-dark-950: rgb(0 60 38);
  /* colors: Light */
  --light-correct-dark-950: rgb(61 45 0);
  --light-correct-light-060: rgb(255 251 240);
  --light-correct-medium: rgb(248 182 0);
  --light-danger-dark-950: rgb(60 0 2);
  --light-danger-light-050: rgb(255 247 248);
  --light-danger-medium: rgb(237 28 36);
  --light-effects-contrast-shadow: rgb(255 255 255);
  --light-effects-contrast-shadow-400-transparent: rgb(255 255 255 / 0.4);
  --light-greys-dark-930: rgb(25 26 29);
  --light-greys-light-028-transparent: rgb(3 9 23 / 0.03);
  --light-greys-light-150-transparent: rgb(3 9 23 / 0.15);
  --light-greys-white: rgb(255 255 255);
  --light-primary-medium: rgb(3 149 255);
  --light-success-bright-180-transparent: rgb(0 219 147 / 0.18);
  --light-success-dark-950: rgb(0 60 38);
  --light-success-light-050: rgb(242 253 250);
  --light-success-medium: rgb(0 199 131);
}

.loading-spinner {
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
}

.loading-spinner.size-default {
  --spinner-size: 160px;
}

[data-theme="light"] .loading-spinner {
  --spinner-track-color: var(--light-greys-light-028-transparent);
  --spinner-color: var(--light-primary-medium);
}

[data-theme="dark"] .loading-spinner {
  --spinner-track-color: var(--dark-greys-white-060-transparent);
 ...