Material Progress Spinner

A multi-tiered Progress Spinner

by IPWright83

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="multi-spinner">
  <div class="multi-spinner-layer spinner-purple"></div>
  <div class="multi-spinner-layer spinner-blue"></div>
  <div class="multi-spinner-layer spinner-green"></div>
  <div class="multi-spinner-layer spinner-yellow"></div>
</div>

CSS

body {
  padding-top: 150px;
  background: white;
}

.multi-spinner {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  z-index: 1001;
}

.multi-spinner-layer {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  z-index: 300;
}

.spinner-purple {
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -75px 0 0 -75px;
  border-top-color: #8e6cc9;
  -webkit-animation: rotate 2.5s linear infinite;
  animation: rotate 2.5s linear infinite;
}

.spinner-blue {
  top: 10px;
  left: 10px;
  width: 160px;
  height: 160px;
  border-top-color: #26c6da;
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}

.spinner-green {
  top: 20px;
  left: 20px;
  width: 140px;
  height: 140px;
  border-top-color: #50ed93;
  -webkit-animation: rotate 1.5s linear infinite;
  animation: rotate 1.5s linear infinite;
}

.spinner-yellow {
  top: 30px;
  left: 30px;
  width: 120px;
  height: 120px;
  border-top-color: #ffb300;
  -webkit-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}