.loader {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
}

.loader:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #000;
    opacity: 0.15;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: loader-shadow 1.5s ease-in-out infinite;
}

.loader:after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("/img/standard/ideaclouds/ideaclouds_logo_symbol_clipped-c6a95d599daf5d1add7b96db884e2b32.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: loader-spin 1.5s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    opacity: 0.6;
  }
  75% {
    transform: rotate(270deg) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

@keyframes loader-shadow {
  0%, 100% {
    transform: scale(1, 1);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.3, 1);
    opacity: 0.25;
  }
}

/* Alternative pulsing animation */
.loader-pulse {
    width: 48px;
    height: 48px;
    margin: auto;
    position: relative;
}

.loader-pulse:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #000;
    opacity: 0.15;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: loader-shadow-pulse 2s ease-in-out infinite;
}

.loader-pulse:after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url("/img/standard/ideaclouds/ideaclouds_logo_symbol_clipped-c6a95d599daf5d1add7b96db884e2b32.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: loader-pulse 2s ease-in-out infinite;
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes loader-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

@keyframes loader-shadow-pulse {
  0%, 100% {
    transform: scale(1, 1);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.4, 1);
    opacity: 0.3;
  }
}