.spinner-container .spinner {
    border: 3px solid rgba(0,0,0,.1);
    border-top-color: rgba(0, 0, 0, 0.1);
    border-top-color: #0071c5;
    animation: rotate 1.5s linear infinite;
}

.spinner-container .spinnerLabel {
    color:white;
}

@keyframes rotate{
  to{ transform: rotate(360deg); }
}
.spinner {
    height: 24px;
    width: 24px;
    background: transparent;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}
/*
<div class="spinner-container">
<div class="spinner">&nbsp;</div>
<span class="value">In progress </span></div>
*/
.loader {
  height: 4px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  background-color: #777;
  position: fixed;
    top: 0;
    left:0;
    z-index:999999;
}

.loader.hidden{
    opacity:0;
    
}

.loaderOverlay{
    display: block;
    height: 100%;
    width: 100%;
    background:rgba(0,0,0,.6);
    float: left;
    position: fixed;
    top: 0;
    /*z-index: 99999;*/
}

.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #111;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}



/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 5px;
  column-fill: initial;
}

/* Masonry item */
.masonry .item {
  margin-bottom: 3px;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
}

/* Bordered masonry */
.masonry.bordered {
  column-rule: 1px solid #eee;
  column-gap:15px;
}

.masonry.bordered .item {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
}

/* Gutterless masonry */
.masonry.gutterless {
  column-gap: 0;
}

.masonry.gutterless .item {
  margin-bottom: 0;
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 1;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 2;
  }
}