.load_bar {
  --spinner-speed: 1s;
  --spinner-radius: 80%;
  --spinner-fill-radius: 90px;
  --spinner-size: 50px;
  --spinner-thickness: 10px;
  --spinner-inner-circle: calc(var(--spinner-size) - var(--spinner-thickness));
  --spinner-color: var(--active-2);
  --spinner-bg: var(--body);
  --spinner-inner-bg: var(--body);
  border-radius: 80%;
  display: block;
  height: var(--spinner-size);
  width: var(--spinner-size);
  position: relative;
  animation: spin var(--spinner-speed) linear 0s infinite normal;
  background: var(--spinner-bg);
  margin: 20px auto;
  }

.load_bar::before,
.load_bar::after {
    content: "";
    display: block;
    position: absolute;
  }

.load_bar::before {
    border-radius: 0 var(--spinner-fill-radius) var(--spinner-fill-radius) 0;
    height: var(--spinner-size);
    width: 50%;
    top: 0; 
    right: 0;
    z-index: 1;
    background: var(--spinner-color);
    background-image: linear-gradient( var(--spinner-bg), var(--spinner-color));
  }

.load_bar::after {
    border-radius: var(--spinner-radius);
    height: var(--spinner-inner-circle);
    width: var(--spinner-inner-circle);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: var(--spinner-inner-bg);
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }