/* Example HTML:

    <div id="loadscreen-animation">
      <div id="checkbox" class="loadscreen-checkbox">    </div>
      <div id="checkmark" class="loadscreen-checkmark"></div>
    </div>

*/

:root {
  --checkmark-bottom-length: 100px;
  --checkmark-back-length: 240px;
  --checkmark-thickness: 30px;
  --checkmark-color: green;
}


.loadscreen-checkmark {
  display: flex;
  flex-direction: column;
  width: max-content;
  position: fixed;
  z-index: 10;
  /*top: 60%;
  left: 50%;*/

}

/* lower check */
.loadscreen-checkmark::before {
  content: ""; /* adds empty content to before element */
  width: var(--checkmark-bottom-length);
  height: var(--checkmark-thickness);
  background-color: var(--checkmark-color);
  rotate: -60deg;
  animation:         draw-down 3s; /* name animation and set animation-duration */
  animation-fill-mode: forwards; /* keeps animation effect after animation complete */
  transform-origin: left bottom;
  border-bottom-right-radius: 9999px;
  border-top-right-radius: 9999px;
}


/* upper mark */
.loadscreen-checkmark  {
  width: 0;
  height: var(--checkmark-thickness);
  background-color: var(--checkmark-color);
  rotate: -70deg;
  animation:         draw-up 2s; /* name animation and set animation-duration */
  animation-delay: 1s;
  animation-fill-mode: backwards;
  transform-origin: left bottom;
  border-bottom-right-radius: 9999px;
  border-top-right-radius: 9999px;
}


@keyframes draw-down {
    0% {clip-path: inset(0 0 0 100%);}
    40% {clip-path: inset(0 0 0 0%);}
    99% {clip-path: inset(0 0 0 0%);} /* helps delay tranisiton out */
    100% {clip-path: inset(0 0 0 100%)}
}

@keyframes draw-up {
    100% {
        width: var(--checkmark-back-length);
    }
}







.loadscreen-checkbox {
  display: flex;
  position: fixed;
  z-index: -9;
  /*top: 48%;
  left: 45%;*/
  margin-left: -100px;
  margin-top: -100px;
  width: 150px; 
  height: 150px; 
  background: transparent; 
  border: 2px solid transparent;
  animation: checkbox-animation 3s ease-in-out backwards; 
}

@keyframes checkbox-animation { 
  0% { 
    /* width: 0; 
    height: 0; */
    border-top-color: transparent; 
    border-right-color: transparent; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 
    z-index: 9;
  }
  25% { 
    /* width: 0; 
    height: 0; */
    border-top-color: black; 
    border-right-color: transparent; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 
    z-index: 9;
  }
  50% { 
    /* width: 150px;
    height: 0;*/
    border-top-color: black; 
    border-right-color: black; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 
  } 
  75% { 
    /* width: 0;
    height: 150px;*/
    border-top-color: transparent; 
    border-right-color: black;
    border-bottom-color: black; 
    border-left-color: transparent; 
  }
  100% { 
    /* width: 150px; 
    height: 150px;*/
    border-top-color: transparent; 
    border-right-color: transparent; 
    border-bottom-color: black; 
    border-left-color: black; 
  } 
} 

/* container for whole animation */
#loadscreen-animation {
    position: fixed;
    top: 50%;
    left: 50%;
}