spinner

spinner.component.css

/* Gradient Animation Configuration */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Outer Background */
.spinner-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Gradient Animation */
  background: linear-gradient(-45deg, white, #ef629b, #478ac9, #2cccc4);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.spinner {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
}

.spinner::before,
.spinner:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.spinner:before {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #478ac9 0%, #2cccc4 50%, #e73c7e 100%); /* #ff00cc 0%,#333399 100% ); */
  animation: spin .5s infinite linear;
}

/* Inner Background */
.spinner:after {
  width: 90%;
  height: 90%;
  background-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image {
  position: fixed;
  z-index: 10000;
  width: 7rem;
  height: 7rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* Main Spinner */
#loading {
  display: inline-block;
  background-color: rgba(255, 255, 255, .8); /* #fff */
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .3); /* .3 */
  border-radius: 50%;
  border-top-color: white; /* #fff */
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

spinner.component.html

<div class="spinner-wrapper">
  <div class="spinner">
        <img class="image" src="../../assets/images/favicon-filled.png">
  </div>
</div>

spinner.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}