<p>Google+ notifications</p>
<div class="loader-gplus"></div>

/**
 * This work is licensed under the Creative Commons
 * Attribution 3.0 Unported License. To view a copy
 * of this license, visit http://creativecommons.org/licenses/by/3.0/.
 *
 * Author: Girish Sharma <scrapmachines@gmail.com>
 */
/* Demo specific styles start */
body {
  background: #444;
}

p {
  font: 18px Roboto,arial,sans-serif;
  color: rgb(64,64,64);
  position: absolute;
  top: calc(50% - 150px);
  padding: 20px 100px 300px;
  left: 50%;
  transform: translateX(-50%);
  margin-right: -50%;
  background: rgb(229, 229, 229);
}

p:before {
  border-style: dashed dashed solid;
  border-color: transparent transparent rgb(229, 229, 229);
  border-width: 0px 10px 10px;
  content: '';
  position: absolute;
  top: -10px;
  left: calc(50% - 10px);
}

p:after {
  position: absolute;
  top: -40px;
  left: calc(50% - 12px);
  height: 30px;
  width: 20px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABRklEQVRIDe1VOwrCQBA1YmNnJxYKFh5C0NbD2HgJL2DhKWxFUOy0EcQreAMRLNQqvqdZCENmM2rwgw68bGbe7L7NbHY3CMMw9w7Lv0OUmn/hl1X+K0rdRzkOANunLbhjO8X3XfCssqXULYiMhBB9xh83frGCAuJDwGfkmaeNocYLnikPwHWBEzADVsAeKAFNoAOQZ9nZ3mXaGrOMC+AIcAJbQFodgR5QBNrAEjCbtsYckDYGkkTJMT7hC8zl3zzDUxPmF9A2t0Z9riPG5auJktCEy1HiTnYQvuNdvqB1VxPWe2TE/IUzKmT6MB9V6mr6fBMzKolRLSjO2Qb8KfCIsR/7q+dznJNHZvzq0+aaFjddmfKSMHVKU7bw1p+LtxOr4TC3DO7Nidfd814DNwfOUUvftJZanlxj7ySzJK2lzlLzOtbvCV8A4iFTEBBgTIcAAAAASUVORK5CYII=);
  content: '';
}

.loader-gplus {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}
/* Demo specific styles end */

.loader-gplus {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  animation: rotate 2.4s linear infinite;
}

.loader-gplus:before, .loader-gplus:after {
  position: absolute;
  width: 50px;
  height: 25px;
  right: 0px;
  border-radius: 50px 50px 0 0;
  z-index: 2;
  content: '';
  animation: color-switch 2.4s linear infinite;
}

.loader-gplus:after {
  transform-origin: 0% 100%;
  animation-name: unfold, color-shift;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-duration: .6s, 2.4s;
}

@keyframes rotate {
  0.0001% {
    transform: rotateZ(0deg);
    background-color: rgb(58,123,247);
  }
  25% {
    transform: rotateZ(0deg);
    background-color: rgb(58,123,247);
  }
  25.0001% {
    transform: rotateZ(90deg);
    background-color: rgb(222,74,66);
  }
  50% {
    transform: rotateZ(90deg);
    background-color: rgb(222,74,66);
  }
  50.0001% {
    transform: rotateZ(180deg);
    background-color: rgb(255,214,74);
  }
  75% {
    transform: rotateZ(180deg);
    background-color: rgb(255,214,74);
  }
  75.0001% {
    transform: rotateZ(270deg);
    background-color: rgb(33,173,100);
  }
  100% {
    transform: rotateZ(270deg);
    background-color: rgb(33,173,100);
  }
}

@keyframes unfold {
  to {
    transform: rotateX(180deg) rotateZ(0deg);
  }
}

@keyframes color-switch {
  0.0001% {
    background-color: rgb(222,74,66);
  }
  25% {
    background-color: rgb(222,74,66);
  }
  25.0001% {
    background-color: rgb(255,214,74);
  }
  50% {
    background-color: rgb(255,214,74);
  }
  50.0001% {
    background-color: rgb(33,173,100);
  }
  75% {
    background-color: rgb(33,173,100);
  }
  75.0001% {
    background-color: rgb(58,123,247);
  }
  100% {
    background-color: rgb(58,123,247);
  }
}

@keyframes color-shift {
  0.0001% {
    background-color: rgb(58,123,247);
    border-bottom: 1px solid rgb(58,123,247);
  }
  12.5% {
    background-color: rgb(40,95,195);
    border-bottom: 1px solid rgb(45,105,200);
  }
  12.5001% {
    background-color: rgb(232,120,115);
    border-bottom: 1px solid rgb(232,120,115);
  }
  25% {
    background-color: rgb(222,74,66);
    border-bottom: 1px solid rgb(222,74,66);
  }
  37.5% {
    background-color: rgb(230,107,99);
    border-bottom: 1px solid rgb(230,107,99);
  }
  37.5001% {
    background-color: rgb(255,222,123);
    border-bottom: 1px solid rgb(255,222,123);
  }
  50% {
    background-color: rgb(255,214,90);
    border-bottom: 1px solid rgb(255,214,90);
  }
  62.5% {
    background-color: rgb(255,222,123);
    border-bottom: 1px solid rgb(255,222,123);
  }
  62.5001% {
    background-color: rgb(25,140,74);
    border-bottom: 1px solid rgb(25,140,74);
  }
  75% {
    background-color: rgb(33,173,100);
    border-bottom: 1px solid rgb(33,173,100);
  }
  87.5% {
    background-color: rgb(82,189,132);
    border-bottom: 1px solid rgb(82,189,132);
  }
  87.5001% {
    background-color: rgb(82,148,247);
    border-bottom: 1px solid rgb(82,148,247);
  }
  100% {
    background-color: rgb(58,123,247);
    border-bottom: 1px solid rgb(58,123,247);
  }
}