body {
  background-image: url('https://sebraers.com.br/wp-content/uploads/2017/08/iStock-695349930-1-e1503606573903.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
}

.loading--circle {
  background-color: black;
  box-sizing: border-box;
  border: solid 20px #373737;
  border-radius: 50%;
  width: 330px;
  height: 330px;
  overflow: hidden;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/68819/bg-loading-ekg4.gif) repeat-x 21px center #000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-name: buildloader;
  -moz-animation-name: buildloader;
  animation-name: buildloader;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes buildloader {
  from {
    width: 0px;
    height: 0px;
    border-width: 1px;
  }
  to {
    width: 330px;
    height: 330px;
    border-width: 20px;
  }
}
@-moz-keyframes buildloader {
  from {
    width: 0px;
    height: 0px;
    border-width: 1px;
  }
  to {
    width: 330px;
    height: 330px;
    border-width: 20px;
  }
}
@keyframes buildloader {
  from {
    width: 0px;
    height: 0px;
    border-width: 1px;
  }
  to {
    width: 330px;
    height: 330px;
    border-width: 20px;
  }
}
.heart {
  position: absolute;
  width: 130px;
  left: 50%;
  top: 50%;
  margin-left: -58px;
  margin-top: -102px;
  -webkit-animation-name: heartbeat;
  -moz-animation-name: heartbeat;
  animation-name: heartbeat;
  -webkit-animation-duration: 0.35s;
  -moz-animation-duration: 0.35s;
  animation-duration: 0.35s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes heartbeat {
  0%, 100% {
    -webkit-transform: scale(1);
  }
  50%, 67% {
    -webkit-transform: scaleY(1.05);
  }
  70% {
    -webkit-transform: scale(1.05);
  }
}
@-moz-keyframes heartbeat {
  0%, 100% {
    -moz-transform: scale(1);
  }
  50%, 67% {
    -moz-transform: scaleY(1.05);
  }
  70% {
    -moz-transform: scale(1.05);
  }
}
@keyframes heartbeat {
  0%, 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50%, 67% {
    -webkit-transform: scaleY(1.05);
    -moz-transform: scaleY(1.05);
    -ms-transform: scaleY(1.05);
    -o-transform: scaleY(1.05);
    transform: scaleY(1.05);
  }
  70% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
}
.ekg--wipe {
  position: absolute;
  width: 300%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.7) 100%);
  -webkit-animation-name: ekgrunning;
  -moz-animation-name: ekgrunning;
  animation-name: ekgrunning;
  -webkit-animation-duration: 1.4s;
  -moz-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-delay: 0.175s;
  -moz-animation-delay: 0.175s;
  animation-delay: 0.175s;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes ekgrunning {
  from {
    left: -150%;
  }
  to {
    left: 0%;
  }
}
@-moz-keyframes ekgrunning {
  from {
    left: -150%;
  }
  to {
    left: 0%;
  }
}
@keyframes ekgrunning {
  from {
    left: -150%;
  }
  to {
    left: 0%;
  }
}