@keyframes pulsing {
  0% {
    transform: scale(.9);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(.9);
  }
}

.pulsing {
  transform: scale(.9);
  animation: pulsing 1s infinite;
}

@keyframes pulsing-small {
  0% {
    transform: scale(.8);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(.8);
  }
}

.pulsing-small {
  transform: scale(.8);
  animation: pulsing-small 2s infinite;
}

@keyframes pulsing-single {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.pulsing-single {
  animation: pulsing-single 1s 0s 1;
}

/* Loading spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(340deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: spin 2s linear infinite;
}

.rotating-border {
  position: relative;
  overflow: hidden;       /* clips the spinning layers to your shape */
  /* Tunables */
  --rb-color: #f8f9fa;    /* color of the rotating slice */
  --rb-size: 50px;       /* diameter of the spinning layers */
  --rb-speed: 1s;       /* rotation duration */
  --rb-gap: 75%;          /* how much of the conic gradient is transparent */
}

/* Spinning layers */
.rotating-border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rb-size);
  height: var(--rb-size);
  transform: translate(-50%, -50%) rotate(0deg);
  background-image: conic-gradient(transparent var(--rb-gap), var(--rb-color));
  animation: rb-spin var(--rb-speed) linear infinite;
  pointer-events: none; /* keep it non-interactive */
  z-index: 0;           /* stays behind your inner content */
}

/* Your content should sit above the spinning layers */
.rotating-border > * {
  z-index: 1;
}

@keyframes rb-spin {
  0% { transform: translate(-50%, -50%) rotate(50deg); }
  70% { transform: translate(-50%, -50%) rotate(320deg); }
  100% { transform: translate(-50%, -50%) rotate(410deg); }
}