/*
 * Keyframes
 */
@keyframes ui-loader-animation
{
  0%
  {
    transform: translateX(-50%) translateY(-50%) rotate(0);
  }
  100%
  {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

/*
 * Base
 */
.ui-loader
{
  height: 200px;
  width: 200px;

  position: relative;
}
.ui-loader-widget
{
  border: 8px solid transparent;
  border-bottom-color: #FFF;
  border-top-color: #FFF;
  border-radius: 50%;
  height: 100%;
  width: 100%;

  position: absolute;
    left: 50%;
    top: 50%;

  animation: ui-loader-animation 1s linear infinite;
}

/*
 * Variants
 */
.ui-loader--golden
{
  .ui-loader-widget
  {
    border-bottom-color: $color-golden;
    border-top-color: $color-golden;
  }
}
