npm installation progress

index.pug

.npm-installation-progress
  .loader-container
    span#loader
    span#loader-points [ . . . . . . . . . .  ]
  #spinner
  p fetchMetadata:
  p#verb verb
  p#mapToRegistry mapToRegistry
  p#uri uri https://registry.npmjs.org/

npm-installation-progress.markdown

npm installation progress

infinite loop ➰

A Pen by Mehmet Burak Erman 🦌 on CodePen.

License.

script.js

const spinner = "|/-\\";

let spinnerDiv = document.getElementById("spinner");
let verb = document.getElementById("verb");
let mapToRegistry = document.getElementById("mapToRegistry");
let uri = document.getElementById("uri");

// spinner
setInterval(function() {
  let random = Math.floor(Math.random() * (5 - 0 + 1)) + 0;
  spinnerDiv.innerHTML = spinner.charAt(random);
}, 100);

verb.innerHTML = "verb";
mapToRegistry.innerHTML = "mapToRegistry";

// texts
setInterval(function() {
  let vs = ["verb", "sill"];
  let random = Math.floor(Math.random() * (1 - 0 + 1)) + 0;

  verb.innerHTML = vs[random];

  if (verb.innerHTML === "sill") {
    verb.style.background = "#fff";
    verb.style.color = "#000";

    mapToRegistry.innerHTML = "mapToRegistry";
    uri.innerHTML = "C:\\Users\\mburakerman\\AppData\\Roaming";
  } else {
    verb.style.background = "#000";
    verb.style.color = "blue";

    mapToRegistry.innerHTML = "afterAdd";
    uri.innerHTML = "uri https://registry.npmjs.org";
  }
}, 1000);

style.css

@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700");
html {
  box-sizing: border-box;
  height: 100%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  paddin: 0;
  margin: 0;
}
body {
  background: #000;
  font-family: "Ubuntu Mono", monospace;
  height: 100%;
}

.npm-installation-progress {
  color: #fff;
  font-size: 17px;
  width: 850px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.loader-container {
  width: 200px;
  overflow: hidden;
  position: relative;
}

#loader {
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: 2px;
  transform: translateY(-50%);
  width: 0px;
  height: 20px;
  background: #fff;
  animation: width 50s steps(1, end) infinite;
}

@keyframes width {
  0% {
    width: 0%;
  }
  5% {
    width: 15%;
  }
  9% {
    width: 20%;
  }
  10% {
    width: 23%;
  }
  15% {
    width: 27%;
  }
  19% {
    width: 30%;
  }
  25% {
    width: 35%;
  }
  31% {
    width: 40%;
  }
  32% {
    width: 45%;
  }
  36% {
    width: 49%;
  }
  39% {
    width: 57%;
  }
  45% {
    width: 62%;
  }
  50% {
    width: 69%;
  }
  54% {
    width: 73%;
  }
  60% {
    width: 78%;
  }
  63% {
    width: 81%;
  }
  90% {
    width: 88%;
  }
}

#spinner {
  margin-left: 10px;
  margin-right: 10px;
  width: 10px;
}

#verb {
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
}

#mapToRegistry {
  color: purple;
  margin-right: 10px;
}