@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap");
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.nb {
  width: 200px;
  height: 200px;
  overflow: visible;
}
.nb__square {
  stroke: #bbb;
  stroke-dasharray: 100, 100;
  stroke-dashoffset: 100;
  animation: square-anim 5s 0s forwards 1;
}
@keyframes square-anim {
  10% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  25% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.nb__line {
  stroke: #bbb;
  stroke-dasharray: 101, 101;
  stroke-dashoffset: 101;
}
.nb__line-1 {
  animation: line-anim 5s -0.125s forwards 1;
}
.nb__line-2 {
  animation: line-anim 5s -0.25s forwards 1;
}
.nb__line-3 {
  animation: line-anim 5s -0.375s forwards 1;
}
.nb__line-4 {
  animation: line-anim 5s -0.5s forwards 1;
}
.nb__line-5 {
  animation: line-anim 5s -0.625s forwards 1;
}
.nb__line-6 {
  animation: line-anim 5s -0.75s forwards 1;
}
@keyframes line-anim {
  20% {
    stroke-dashoffset: 101;
  }
  30% {
    stroke-dashoffset: 0;
  }
  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.nb__circle {
  stroke: #bbb;
  stroke-dasharray: 101, 101;
  stroke-dashoffset: 101;
  animation: circle-anim 5s 0s forwards 1;
}
@keyframes circle-anim {
  05% {
    stroke-dashoffset: 101;
    opacity: 1;
  }
  40% {
    stroke-dashoffset: 0;
  }
  45% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.nb__per {
  stroke: #047;
  stroke-dasharray: 101, 101;
  stroke-dashoffset: 101;
  animation: per-anim 5s 0s forwards 1;
}
@keyframes per-anim {
  0% {
    stroke-dashoffset: 101;
  }
  20% {
    stroke-dashoffset: 101;
  }
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.nb__per-2 {
  animation: per-anim-2 5s 0s forwards 1;
}
@keyframes per-anim-2 {
  0% {
    stroke-dashoffset: 101;
  }
  50% {
    stroke-dashoffset: 101;
  }
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.nb__fill {
  opacity: 0%;
  animation: fill-1 5s 0s forwards 1;
}
@keyframes fill-1 {
  0% {
    opacity: 0%;
  }
  60% {
    opacity: 0%;
  }
  70% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
  }
}
.nb__fill-2 {
  animation: fill-2 5s 0s forwards 1;
}
@keyframes fill-2 {
  0% {
    opacity: 0%;
  }
  70% {
    opacity: 0%;
  }
  90% {
    opacity: 100%;
  }
  100% {
    opacity: 100%;
  }
}
.nb__text {
  font-family: Nunito;
  font-weight: 900;
  text-anchor: middle;
}
.nb__text-1 {
  fill: #047;
  stroke: #8cf;
}
.nb__text-2 {
  fill: #fff;
  stroke: #047;
}

.scale {
  --value:0;
  display: block;
  position: relative;
  width: 200px;
  height: 6px;
  border: 1px solid #bbb;
  border-radius: 5px;
  margin: 20px auto;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 2;
  text-align: center;
  animation: scale-anim 5s 0s forwards 1 linear;
}
@keyframes scale-anim {
  0% {
    background: linear-gradient(90deg, #07c 0%, transparent 0);
  }
  20% {
    background: linear-gradient(90deg, #07c 20%, transparent 0);
  }
  40% {
    background: linear-gradient(90deg, #07c 40%, transparent 0);
  }
  60% {
    background: linear-gradient(90deg, #07c 60%, transparent 0);
  }
  80% {
    background: linear-gradient(90deg, #07c 80%, transparent 0);
  }
  100% {
    background: linear-gradient(90deg, #07c 100%, transparent 0);
  }
}
@keyframes scale-anim {
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.scale:before {
  content: "";
  border-radius: inherit;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #07c;
  left: 0;
  margin-left: 0;
  width: 10%;
  animation: scale-anim-b 5s 0s forwards 1 linear;
}
@keyframes scale-anim-b {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.scale:xafter {
  content: attr(data-text-loading);
  display: block;
  text-align: center;
}
@keyframes scale-anim-text {
  0% {
    content: attr(data-text-loading);
  }
  60% {
    content: attr(data-text-loading);
    color: inherit;
  }
  80% {
    content: attr(data-text-loading);
    color: white;
  }
  81% {
    content: attr(data-text-done);
  }
  100% {
    content: attr(data-text-done);
    color: black;
  }
}
@keyframes scale-anim-1 {
  0% {
    content: "0%";
    width: 0%;
  }
  5% {
    content: "5%";
  }
  10% {
    content: "10%";
  }
  15% {
    content: "15%";
  }
  20% {
    content: "20%";
  }
  25% {
    content: "25%";
  }
  30% {
    content: "30%";
  }
  35% {
    content: "35%";
  }
  40% {
    content: "40%";
  }
  45% {
    content: "45%";
  }
  50% {
    content: "50%";
  }
  55% {
    content: "55%";
  }
  60% {
    content: "60%";
  }
  65% {
    content: "65%";
  }
  70% {
    content: "70%";
  }
  75% {
    content: "75%";
  }
  80% {
    content: "80%";
  }
  85% {
    content: "85%";
  }
  90% {
    content: "90%";
  }
  95% {
    content: "95%";
  }
  100% {
    content: "100%";
    width: 100%;
  }
}

.img-container {
  width: 200px;
  height: 230px;
  position: relative;
  margin: auto auto;
  display: block;
  position: absolute;
  top: calc(50% - 110px);
  left: calc(50% - 100px);
}