@keyframes expand {
  from {
    stroke-dashoffset: 126;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(270deg);
  }
}
:host {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: transparent !important;
  padding: 0.5em;
}
.wrapper {
  animation: rotate 1.5s infinite cubic-bezier(0.0, 0.0, 0.2, 1);
  width: 44px;
  height: 44px;
  transform-origin: center;
}
.circle {
  animation: expand 1.5s infinite cubic-bezier(0.0, 0.0, 0.2, 1);
  stroke-dasharray: 126;
  stroke: var(--default-highlight);
}
:host(.primary) .circle {
  stroke: var(--primary-color);
}
:host(.secondary) .circle {
  stroke: var(--secondary-color);
}
:host(.success) .circle {
  stroke: var(--success-color);
}
:host(.warning) .circle {
  stroke: var(--warning-color);
}
:host(.danger) .circle {
  stroke: var(--danger-color);
}
:host(.dark) .circle {
  stroke: var(--dark-color);
}
:host(.light) .circle {
  stroke: var(--light-color);
}

:host(.small) .wrapper {
  width: 30px;
  height: 30px;
}
:host(.large) .wrapper {
  width: 60px;
  height: 60px;
}