SOURCE

var p = document.getElementById("percentage")
var tl = new TimelineMax({ repeat: -1, repeatDelay: 1,
                         onRepeat: function() { p.innerHTML = "0" }})
var tl2 = new TimelineMax({ repeat: -1 })
var tl3 = new TimelineMax({ repeat: -1 })
var tl4 = new TimelineMax({ repeat: -1 })

TweenMax.set(".bar", { scaleY: 0, transformOrigin: "50% 100%"})
TweenMax.set("#loader", { opacity: 0, scale: 0.8, transformOrigin: "50% 50%" })
TweenMax.set("#ring1", { transformOrigin: "50% 50%" })
TweenMax.set("#ring2", { transformOrigin: "50% 50%" })
TweenMax.set("#ring3", { rotation: -95, transformOrigin: "50% 50%" })
TweenMax.set("#percentage-container", { transformOrigin: "50% 50%" })

tl.to("#loader", 1, { opacity: 1, scale: 1 })
tl.from("#percentage-container", 0.5, { x: -20, opacity: 0 }, "a")
tl.add(TweenMax.to(".bar", 5, {
  scaleY: 1, ease: Linear.easeNone,
  onUpdate: function() {
    p.innerHTML = Math.floor(this.progress() * 100)
  }
}), "a")
tl.to("#percentage-container", 0.5, { scale: 1.2, opacity: 0 })
tl.to("#loader", 0.5, { opacity: 0, scale: 1.2 })

tl2.to("#ring1", 10, { rotation: 360, ease: Linear.easeNone })
tl3.to("#ring2", 5, { rotation: -360, ease: Linear.easeNone })
tl4.to("#ring3", 2.5, { rotation: -455, ease: Power3.easeInOut })

<div class="container">
  <svg viewBox="0 0 400 200" width=100%>
    <defs>
      <mask id="text-mask">
        <text x="50%" y="135"
              text-anchor="middle"
              font-size="120"
              fill="white"
              >loading</text>
      </mask>
      <mask id="outline-mask">
        <text x="50%" y="135"
              text-anchor="middle"
              font-size="120"
              fill="transparent"
              stroke="white" stroke-width=1
              >loading</text>
      </mask>
    </defs>
    <g id="loader">
      <circle id="ring1"
              cx=50% cy=50% r=75
              fill="none"
              stroke="hsl(0,0%,80%)"
              stroke-dasharray="14 14"></circle>
      <circle id="ring2"
              cx=50% cy=50% r=60
              fill="none"
              stroke="hsl(0,0%,80%)"
              stroke-width=10
              stroke-dasharray="80 400"></circle>
      <circle id="ring3"
              cx=50% cy=50% r=80
              fill="none"
              stroke="hsl(0,0%,80%)"
              stroke-width=5
              stroke-dasharray="20 500"></circle>
      <g id="percentage-container">
        <text id="percentage" x=322 y=65
              font-size=30
              fill="#666"
              text-anchor="end">0</text>
        <text x=327 y=53
              font-size=15
              fill="#666"
              text-anchor="start">%</text>
      </g>
      <g mask="url(#text-mask)">
        <rect x=0 y=50
              width="100%" height=110
              fill="hsl(0,0%,90%)"></rect>
        <rect class="bar" x=0 y=50
              width="100%" height=110
              fill="hsl(200,60%,50%)"
              stroke="hsl(200,60%,40%)"></rect>
      </g>
      <text x="50%" y="135"
            text-anchor="middle"
            font-size="120"
            fill="transparent"
            stroke="hsl(0,0%,80%)" stroke-width=1
            >loading</text>
      <g mask="url(#outline-mask)">
          <rect class="bar" x=0 y=50
                width="100%" height=110
                fill="hsl(200,60%,40%)"
                stroke="hsl(200,60%,40%)"></rect>
      </g>
    </g>
  </svg>
</div>

@import url('https://fonts.googleapis.com/css?family=Ranga:700');

html, body {
  height: 100%;
  font-family: Ranga;
  background-color: hsl(200,50%,95%);
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}