.spinner-container {
  font-size: 11px;
  font-family: inherit;
  padding: 1em;
  margin: 0;
  text-align: center;
  background-color: rgba(255,255,255,0.8);
  /*border-radius: 5px;*/
  transition:opacity 1s;
  width: 100%;
  height:100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  box-sizing: border-box;
}

.spinner-container .x-circle
{
  padding: 0;
  margin: 0;
}
.spinner-container .x-background
{
  stroke: rgb(232, 235, 237);
}
.spinner-container .x-foreground
{
  stroke: rgba(15,107,213,0.8);
}

.spinner-container.x-error .x-background
{
  stroke: rgba(213,15,15,0.8);
}

.spinner-container.x-error .x-foreground
{
  stroke: rgba(213,15,15,0.8);
}

.spinner-container .x-error-icon
{
  opacity: 0;
}

.spinner-container.x-error .x-error-icon
{
  opacity: 1;
}


.spinner.x-animated .x-foreground
{
  animation: spinner-rotation 3s linear infinite;
  transition: stroke-dashoffset 0.1s linear;
  transform-origin: center center;
  transform-box: fill-box;
  -webkit-transform-origin: center center;
}

.spinner-container .x-label
{
}
@keyframes spinner-rotation
{
  from    {transform: rotate(0deg);}
  to      {transform: rotate(360deg);}
}