Loading Google

Add loading page sample Google
HTML & CSS

<doodle-notifier style="display: inline-block; height: 48px; position: relative; width: 48px;">
    <div class="main running">
      <div class="outer" style="transform: rotate(45deg); animation-delay: 2640ms;">
        <div class="inner" style="background: linear-gradient(315deg, rgb(0, 85, 221), rgb(0, 119, 255), rgb(0, 119, 255));"></div>
      </div>
      <div class="outer" style="transform: rotate(135deg); animation-delay: 1760ms;">
        <div class="inner" style="background: linear-gradient(225deg, rgb(221, 0, 0), rgb(238, 51, 51), rgb(255, 119, 85));"></div>
      </div>
      <div class="outer" style="transform: rotate(225deg); animation-delay: 0ms;">
        <div class="inner" style="background: linear-gradient(90deg, rgb(0, 119, 68), rgb(0, 153, 68), rgb(85, 187, 85));"></div>
      </div>
      <div class="outer" style="transform: rotate(315deg); animation-delay: 880ms;">
        <div class="inner" style="background: linear-gradient(0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102));"></div>
      </div>
    </div>
</doodle-notifier>

.running .outer {
        -webkit-animation: animZOrder 3520ms linear infinite;
    }
    .outer {
        height: 37.5%;
        left: 50%;
        margin-left: -18.75%;
        margin-top: -18.75%;
        position: absolute;
        top: 50%;
        width: 37.5%;
    }
    .inner {
      -webkit-transform: rotate(90deg) translate(-98%, 0);
      border-radius: 50%;
      height: 100%;
      position: absolute;
      width: 100%;
    }
    .running .inner {
      -webkit-animation: animPos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
          infinite alternate;
    }
    @-webkit-keyframes animPos {
      0% { -webkit-transform: rotate(90deg) translate(-98%, 0); }
      100% { -webkit-transform: rotate(90deg) translate(98%, 0); }
    }
    @-webkit-keyframes animZOrder {
      0% { z-index: 100; }
      100% { z-index: 1; }
    }