styling the loader

_global_styles.scss

.loader-container{
    background: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0.9;
    z-index: 1000;
    mat-spinner circle{
        animation: mat-progress-spinner-stroke-rotate-100 4s cubic-bezier(.35,0,.25,1) infinite , color 4s ease-in-out infinite!important;
        stroke-linecap: round;
    }
    
    @keyframes color {
      100%,
      0% {
        stroke: map-get($modhyobitto-colors,primary);
      }
      40% {
        stroke: map-get($modhyobitto-colors,primary-dark);
      }
      66% {
        stroke: map-get($modhyobitto-colors,primary-light);
      }
      80%,
      90% {
        stroke: map-get($modhyobitto-colors,primary);
      }
    }
    .loader-container__text{
        font-family: 'RobotoBold', sans-serif;
        font-size: 1.2rem;
        margin-top: 30px;
    }
}