*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body{
    position: relative;
}

.throbber-container{
    z-index: 190;
    position: fixed;
    top:0;
    left:0;
    height:100%;  
    width:100%;
    background-color: #00000066;
    display: none;
  }
  
  .throbber{
    z-index: 200;
    height: 5px;
    width: 5px;
    top: 50%;
    left: 50%;
    position: absolute;
    background-color: rgba(211, 0, 0, 1);
    padding: 0;
    border: 0 solid rgb(211, 0, 0);
    border-radius: 50%;
    transform: translate(-50%, -50%);

    animation-name: throbber-anim;
    animation-duration: 2s; 
    animation-iteration-count: infinite;
  }

  .throbber-start{
    display: block;
  }

  @keyframes throbber-anim {
    50% { border-width: 30px; background-color: rgba(211, 0, 0, 1)}
    52% { border-width: 30px; background-color: rgba(211, 0, 0, 0);}
    80% {width: 60px; height: 60px; border-width: 0;  background-color : rgba(224, 66, 66, 0);}
  }