loading-indicator {
     position: relative;
     width: 50px;
     height: 50px;
     margin: 15px;
     position: relative;
     display: flex;
     transition: opacity 400ms ease-out;
     opacity: 0.0;
}
loading-indicator[visable] { opacity: 1.0; }
loading-indicator[hidden] { display: none; }

loading-indicator[type=circle] > .label {
     width: 80%;
     height: 80%;
     position: absolute;
     background: #E9E9E9; /*#34495e;*/
     color: #ecf0f1;
     text-align: center;
     z-index: 2;
     border-radius: 50%;
     left: 10%;
     top: 10%;
}
loading-indicator[type=circle] > .outline {
     background: #bdc3c7;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     position: absolute;
}
loading-indicator[type=circle] > .inner {
     position: absolute;
     width: 100%;
     height: 100%;
}
loading-indicator[type=circle] > .inner.hide_half { clip-path: inset(0px 0px 0px 50%); }
loading-indicator[type=circle] > .inner > .inner_half {
     width: 100%;
     height: 100%;
     background: #5273F1;
     position: absolute;
     border-radius: 50%;
     clip-path: inset(0px 50% 0px 0px);
}
loading-indicator[type=circle] > .inner > .left { transform: rotate(180deg); }
loading-indicator[type=circle] > .inner > .right { transform: rotate(270deg); }
loading-indicator[type=circle][indeterminate] > .inner > .left { display: none; }
loading-indicator[type=circle][indeterminate] > .inner > .right { clip-path: inset(0px 50% 50% 0px); }

loading-indicator:not([indeterminate]) > .inner > .inner_half {
     transition: transform 200ms ease-out 0s;
}


loading-indicator[type=bar] {

}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hide_animation {
  0% { opacity: 1.0; }
  99% { opacity: 0.0; }
  100% { display: none; }
}
@keyframes show_animation {
  0% { display: flex; }
  1% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
