#btn--yp {
  box-sizing: content-box;
  position: fixed;
  z-index: 9;
  bottom: 1em;
  right: 1em;
  border: solid 1em transparent;
  width: 4.625em;
  height: 3.25em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/icon-yp.svg) 50%/cover content-box;
  font: 16px/ 1.25 trebuchet ms, sans-serif;
  text-indent: 200vw;
  text-shadow: none;
  filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0);
  transition: .5s;
  white-space: nowrap;
}
#btn--yp:before {
  box-sizing: inherit;
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 1em -.5em;
  padding: .5em;
  width: 100%;
  border-radius: 5px;
  background: #e8e0e0;
  color: #000;
  text-align: center;
  text-decoration: none;
  text-indent: 0vw;
  white-space: normal;
  animation: float 1s ease-in-out infinite alternate;
  content: attr(data-txt);
}
#btn--yp:hover, #btn--yp:focus {
  outline: none;
  filter: grayscale(0) drop-shadow(0 0 1px crimson);
}

@keyframes float {
  to {
    transform: translateY(0.75em);
  }
}
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, 3.5em);
  grid-gap: 1em;
  place-content: center;
  margin: 0;
  padding: 0 1em;
  height: 100vh;
  background: repeating-linear-gradient(45deg, #433d62 0 4px, #29253e 0 9px);
  font: 2.5em ubuntu mono, monospace;
}

div {
  height: 3.5em;
  box-shadow: inset 0 0 0 4px #1d1b33;
  color: #fff;
  counter-reset: p var(--p);
  animation: p 8s linear infinite;
}
div, div::before, div::after {
  display: grid;
  border-radius: 50%;
}
div::before {
  place-content: center;
  margin: -2px;
  background: radial-gradient(circle at 50% 4px, var(--c0) 4px, transparent 0), conic-gradient(var(--c0), var(--c1) calc(var(--p)*1%), transparent 0%);
  --mask:
  	linear-gradient(red, red) text,
  	radial-gradient(closest-side,
  			transparent calc(100% - 2*4px - 1px),
  			red calc(100% - 2*4px));
  -webkit-mask: var(--mask);
  content: counter(p) "%";
}
div::after {
  position: absolute;
  margin: calc(.5*3.5em - 4px);
  padding: 4px;
  transform: rotate(calc(4grad*var(--p))) translatey(calc(.5*4px - .5*3.5em));
  box-shadow: 0 0 1px var(--c1);
  background: var(--c1);
  content: "";
}

div:nth-child(2) {
  animation-duration: 5s;
  animation-delay: -4s;
}

@keyframes p {
  95%, 100% {
    --p: 100 ;
  }
}