.loadcontainer {
    height: 100vh;
    width: 100vw;
    font-family: Helvetica;
    background-color: rgba(237, 14, 14, 0.144); 
  }
  
  .loader {
    height: 20px;
    width: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }
  .loader--dot {
      animation-name: loader;
      animation-timing-function: ease-in-out;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      height: 20px;
      width: 20px;
      border-radius: 100%;
      background-color: black;
      position: absolute;
      border: 2px solid white; }
  .loader--dot:first-child {
    background-color: #8cc759;
    animation-delay: 0.5s; }
  .loader--dot:nth-child(2) {
    background-color: #8c6daf;
    animation-delay: 0.4s; }
  .loader--dot:nth-child(3) {
    background-color: #ef5d74;
    animation-delay: 0.3s; }
  .loader--dot:nth-child(4) {
    background-color: #f9a74b;
    animation-delay: 0.2s; }
  .loader--dot:nth-child(5) {
    background-color: #60beeb;
    animation-delay: 0.1s; }
  .loader--dot:nth-child(6) {
    background-color: #fbef5a;
    animation-delay: 0s; }
  .loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto; }
  .loader--text:after {
    content: "Loading";
    font-weight: bold;
    animation-name: loading-text;
    animation-duration: 3s;
    animation-iteration-count: infinite; }

  @keyframes loader {
    15% {
      transform: translateX(0); }
    45% {
      transform: translateX(230px); }
    65% {
      transform: translateX(230px); }
    95% {
      transform: translateX(0); } }
  
  @keyframes loading-text {
    0% {
      content: "Loading"; }
    25% {
      content: "Loading."; }
    50% {
      content: "Loading.."; }
    75% {
      content: "Loading..."; } }
  

      .process_loader{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,0.75)  no-repeat center center;
        z-index: 10000;
        align-items: center;
        }

      .process_loader_inner{
        display: flex;
        flex-direction: column;
      justify-content: center;
      }
      .loader_p {
        animation: rotate 1s infinite;  
        height: 50px;
        width: 50px;
        position: fixed;
        top: 50%;
        left: 50%;
      }
      
      .loader_p:before,
      .loader_p:after {   
        border-radius: 50%;
        content: '';
        display: block;
        height: 20px;  
        width: 20px;
      }
      .loader_p:before {
        animation: ball1 1s infinite;  
        background-color: #cb2025;
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px;
      }
      .loader_p:after {
        animation: ball2 1s infinite; 
        background-color: #00a096;
        box-shadow: 30px 0 0 #97bf0d;
      }
      .process_text{
        position: fixed;
        top: 58%;
        left: 49%;
      }
      
  .process_text:after {
    content: "processing";
    font-weight: bold;
    animation-name: processing-text;
    animation-duration: 3s;
    animation-iteration-count: infinite; }
      @keyframes rotate {
        0% { 
          -webkit-transform: rotate(0deg) scale(0.8); 
          -moz-transform: rotate(0deg) scale(0.8);
        }
        50% { 
          -webkit-transform: rotate(360deg) scale(1.2); 
          -moz-transform: rotate(360deg) scale(1.2);
        }
        100% { 
          -webkit-transform: rotate(720deg) scale(0.8); 
          -moz-transform: rotate(720deg) scale(0.8);
        }
      }
      
      @keyframes ball1 {
        0% {
          box-shadow: 30px 0 0 #f8b334;
        }
        50% {
          box-shadow: 0 0 0 #f8b334;
          margin-bottom: 0;
          -webkit-transform: translate(15px,15px);
          -moz-transform: translate(15px, 15px);
        }
        100% {
          box-shadow: 30px 0 0 #f8b334;
          margin-bottom: 10px;
        }
      }
      
      @keyframes ball2 {
        0% {
          box-shadow: 30px 0 0 #97bf0d;
        }
        50% {
          box-shadow: 0 0 0 #97bf0d;
          margin-top: -20px;
          -webkit-transform: translate(15px,15px);
          -moz-transform: translate(15px, 15px);
        }
        100% {
          box-shadow: 30px 0 0 #97bf0d;
          margin-top: 0;
        }
      }      

      @keyframes processing-text {
        0% {
          content: "processing"; }
        25% {
          content: "processing."; }
        50% {
          content: "processing.."; }
        75% {
          content: "processing..."; } }