/* -------------------------------- */
  .bar-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    width: 2.5rem;
    position: relative;
  }
  .bar-spinner-bar {
    position: absolute;
    width: 6px;
    height: 26%;
    background: #6366f1;
    border-radius: 2px;
    opacity: 0.15;
    left: 50%;
    top: 14%;
    transform-origin: center 110%;
    animation: bar-spinner-fade 1.2s linear infinite;
  }
  .bar-spinner-bar:nth-child(1)  { transform: rotate(0deg)    translateY(-60%); animation-delay: 0s;}
  .bar-spinner-bar:nth-child(2)  { transform: rotate(30deg)   translateY(-60%); animation-delay: 0.1s;}
  .bar-spinner-bar:nth-child(3)  { transform: rotate(60deg)   translateY(-60%); animation-delay: 0.2s;}
  .bar-spinner-bar:nth-child(4)  { transform: rotate(90deg)   translateY(-60%); animation-delay: 0.3s;}
  .bar-spinner-bar:nth-child(5)  { transform: rotate(120deg)  translateY(-60%); animation-delay: 0.4s;}
  .bar-spinner-bar:nth-child(6)  { transform: rotate(150deg)  translateY(-60%); animation-delay: 0.5s;}
  .bar-spinner-bar:nth-child(7)  { transform: rotate(180deg)  translateY(-60%); animation-delay: 0.6s;}
  .bar-spinner-bar:nth-child(8)  { transform: rotate(210deg)  translateY(-60%); animation-delay: 0.7s;}
  .bar-spinner-bar:nth-child(9)  { transform: rotate(240deg)  translateY(-60%); animation-delay: 0.8s;}
  .bar-spinner-bar:nth-child(10) { transform: rotate(270deg)  translateY(-60%); animation-delay: 0.9s;}
  .bar-spinner-bar:nth-child(11) { transform: rotate(300deg)  translateY(-60%); animation-delay: 1.0s;}
  .bar-spinner-bar:nth-child(12) { transform: rotate(330deg)  translateY(-60%); animation-delay: 1.1s;}
  @keyframes bar-spinner-fade {
    0%   { opacity: 0.15 }
    20%  { opacity: 1 }
    100% { opacity: 0.15 }
  }