sertxudev/binary-entry.css

## binary-entry.css
.loader {
  width: 350px;
  height: 170px;
  position: relative;
}

.loader::before, .loader::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 30px;
  left: 15px;
  z-index: 1;
  border-left: 170px solid transparent;
  border-right: 170px solid transparent;
  border-bottom: 31px solid #1b2a33;
  transform: scale(0);
  transition: all 0.2s ease;
}

.loader::after {
  border-right: 15px solid transparent;
  border-bottom: 30px solid #162229;
}

.loader .getting-there {
  width: 120%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: -7%;
  font-family: "Lato";
  font-size: 12px;
  letter-spacing: 2px;
  color: white;
}

.loader .binary {
  width: 100%;
  height: 140px;
  display: block;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
}

.loader .binary::before, .loader .binary::after {
  font-family: "Lato";
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation-iteration-count: 3;

}

.loader .binary.false::before {
  content: "0";
}

.loader .binary.false::after {
  content: "0";
}

.loader .binary.true::before {
  content: "1";
}

.loader .binary.true::after {
  content: "1";
}

.loader .binary:nth-of-type(1)::before {
  animation: a 1.5s linear infinite;
  left: 107px;
}

.loader .binary:nth-of-type(1)::after {
  animation: b 1.3s linear infinite;
  left: 190px;
}

.loader .binary:nth-of-type(2)::before {
  animation: c 1.3s linear infinite;
  left: 130px;
}

.loader .binary:nth-of-type(2)::after {
  animation: d 1.8s linear infinite;
  left: 60px;
}

.loader .binary:nth-of-type(3)::before {
  animation: e 1.7s linear infinite;
  left: 140px;
}

.loader .binary:nth-of-type(3)::after {
  animation: f 1.1s linear infinite;
  left: 5px;
}

.loader .binary:nth-of-type(4)::before {
  animation: g 1.7s linear infinite;
  left: 220px;
}

.loader .binary:nth-of-type(4)::after {
  animation: h 1.1s linear infinite;
  left: 120px;
}

.loader.JS_on::before, .loader.JS_on::after {
  transform: scale(1);
}

@keyframes a {
  0% {
    transform: translate(30px, 0) rotate(30deg);
    opacity: 0;
  }
  100% {
    transform: translate(30px, 150px) rotate(-50deg);
    opacity: 1;
  }
}

@keyframes b {
  0% {
    transform: translate(50px, 0) rotate(-40deg);
    opacity: 0;
  }
  100% {
    transform: translate(40px, 150px) rotate(80deg);
    opacity: 1;
  }
}

@keyframes c {
  0% {
    transform: translate(70px, 0) rotate(10deg);
    opacity: 0;
  }
  100% {
    transform: translate(60px, 150px) rotate(70deg);
    opacity: 1;
  }
}

@keyframes d {
  0% {
    transform: translate(30px, 0) rotate(-50deg);
    opacity: 0;
  }
  100% {
    transform: translate(45px, 150px) rotate(30deg);
    opacity: 1;
  }
}

@keyframes e {
  0% {
    transform: translate(30px, 0) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: translate(45px, 150px) rotate(50deg);
    opacity: 1;
  }
}

@keyframes f {
  0% {
    transform: translate(60px, 0) rotate(50deg);
    opacity: 0;
  }
  100% {
    transform: translate(70px, 150px) rotate(10deg);
    opacity: 1;
  }
}

@keyframes g {
  0% {
    transform: translate(60px, 0) rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform: translate(40px, 150px) rotate(40deg);
    opacity: 1;
  }
}

@keyframes h {
  0% {
    transform: translate(30px, 0) rotate(50deg);
    opacity: 0;
  }
  100% {
    transform: translate(30px, 150px) rotate(-30deg);
    opacity: 1;
  }
}

## index.html
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./binary-entry.css">
    <link rel="stylesheet" href="./loading-bar.css">
  </head>
  <body>
    <div class="chart col-6 mx-auto">
      <div class="binary-entry">
        <div class="loader JS_off d-md-block d-none">
          <span class="d-none binary true"></span>
          <span class="d-none binary false"></span>
          <span class="d-none binary true"></span>
          <span class="d-none binary false"></span>
          <span class="getting-there">WAITING RESPONSE...</span>
        </div>
      </div>

      <div class="bar bar-0 cyan" id="liquidBar">
        <div class="face top">
          <div class="growing-bar"></div>
        </div>
        <div class="face side-0">
          <div class="growing-bar"></div>
        </div>
        <div class="face floor">
          <div class="growing-bar"></div>
        </div>
        <div class="face side-a"></div>
        <div class="face side-b"></div>
        <div class="face side-1">
          <div class="growing-bar"></div>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </body>
</html>

## loading-bar.css
.chart {
  font-size: 1em;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  backface-visibility: visible;
}

.bar {
  font-size: 1em;
  position: relative;
  height: 10em;
  transition: all 0.3s ease-in-out;
  transform: rotateX(60deg) rotateY(0deg);
  transform-style: preserve-3d;
}

.bar .face {
  font-size: 2em;
  position: relative;
  width: 100%;
  height: 2em;
  background-color: rgba(254, 254, 254, 0.3);
}

.bar .face.side-a, .bar .face.side-b {
  width: 2em;
}

.bar .side-a {
  transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
}

.bar .side-b {
  transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  position: absolute;
  right: 0;
}

.bar .side-0 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}

.bar .side-1 {
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}

.bar .top {
  transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}

.bar .floor {
  box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
}

.growing-bar {
  transition: all 0.3s ease-in-out;
  background-color: rgba(236, 0, 140, 0.6);
  width: 100%;
  height: 2em;
}

.bar.yellow .side-a,
.bar.yellow .growing-bar {
  background-color: rgba(241, 196, 15, 0.6);
}

.bar.yellow .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);
}

.bar.yellow .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
}

.bar.red .side-a, input[id='red']:checked ~ .chart .side-a,
.bar.red .growing-bar,
input[id='red']:checked ~ .chart .growing-bar {
  background-color: rgba(236, 0, 140, 0.6);
}

.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8);
}

.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8);
}

.bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a,
.bar.cyan .growing-bar,
input[id='cyan']:checked ~ .chart .growing-bar {
  background-color: rgba(0, 59, 150, 0.6);
}

.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #003b96;
}

.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #003b96;
}

.bar.navy .side-a,
.bar.navy .growing-bar {
  background-color: rgba(10, 64, 105, 0.6);
}

.bar.navy .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);
}

.bar.navy .floor .growing-bar {
  box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
}

.bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a,
.bar.lime .growing-bar,
input[id='lime']:checked ~ .chart .growing-bar {
  background-color: rgba(255, 51, 72, 0.6);
}

.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #ff3348;
}

.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {
  box-shadow: 0em 0em 2em #ff3348;
}

.bar.white .side-a,
.bar.white .growing-bar {
  background-color: rgba(254, 254, 254, 0.6);
}

.bar.white .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #fefefe;
}

.bar.white .floor .growing-bar {
  box-shadow: 0em 0em 2em #fefefe;
}

.bar.gray .side-a,
.bar.gray .growing-bar {
  background-color: rgba(68, 68, 68, 0.6);
}

.bar.gray .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #444;
}

.bar.gray .floor .growing-bar {
  box-shadow: 0em 0em 2em #444;
}

.chart .bar.yellow-face .face {
  background-color: rgba(241, 196, 15, 0.2);
}

.chart .bar.lime-face .face {
  background-color: rgba(255, 51, 72, 0.2);
}

.chart .bar.red-face .face {
  background-color: rgba(236, 0, 140, 0.2);
}

.chart .bar.navy-face .face {
  background-color: rgba(10, 64, 105, 0.2);
}

.chart .bar.cyan-face .face {
  background-color: rgba(0, 59, 150, 0.2);
}

.chart .bar.gray-face .face {
  background-color: rgba(68, 68, 68, 0.2);
}

.chart .bar.lightGray-face .face {
  background-color: rgba(145, 145, 145, 0.2);
}

.bar-0 .growing-bar {
  width: 0%;
}

.bar-1 .growing-bar {
  width: 1%;
}

.bar-2 .growing-bar {
  width: 2%;
}

.bar-3 .growing-bar {
  width: 3%;
}

.bar-4 .growing-bar {
  width: 4%;
}

.bar-5 .growing-bar {
  width: 5%;
}

.bar-6 .growing-bar {
  width: 6%;
}

.bar-7 .growing-bar {
  width: 7%;
}

.bar-8 .growing-bar {
  width: 8%;
}

.bar-9 .growing-bar {
  width: 9%;
}

.bar-10 .growing-bar {
  width: 10%;
}

.bar-11 .growing-bar {
  width: 11%;
}

.bar-12 .growing-bar {
  width: 12%;
}

.bar-13 .growing-bar {
  width: 13%;
}

.bar-14 .growing-bar {
  width: 14%;
}

.bar-15 .growing-bar {
  width: 15%;
}

.bar-16 .growing-bar {
  width: 16%;
}

.bar-17 .growing-bar {
  width: 17%;
}

.bar-18 .growing-bar {
  width: 18%;
}

.bar-19 .growing-bar {
  width: 19%;
}

.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
  width: 20%;
}

.bar-21 .growing-bar {
  width: 21%;
}

.bar-22 .growing-bar {
  width: 22%;
}

.bar-23 .growing-bar {
  width: 23%;
}

.bar-24 .growing-bar {
  width: 24%;
}

.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
  width: 25%;
}

.bar-26 .growing-bar {
  width: 26%;
}

.bar-27 .growing-bar {
  width: 27%;
}

.bar-28 .growing-bar {
  width: 28%;
}

.bar-29 .growing-bar {
  width: 29%;
}

.bar-30 .growing-bar {
  width: 30%;
}

.bar-31 .growing-bar {
  width: 31%;
}

.bar-32 .growing-bar {
  width: 32%;
}

.bar-33 .growing-bar {
  width: 33%;
}

.bar-34 .growing-bar {
  width: 34%;
}

.bar-35 .growing-bar {
  width: 35%;
}

.bar-36 .growing-bar {
  width: 36%;
}

.bar-37 .growing-bar {
  width: 37%;
}

.bar-38 .growing-bar {
  width: 38%;
}

.bar-39 .growing-bar {
  width: 39%;
}

.bar-40 .growing-bar {
  width: 40%;
}

.bar-41 .growing-bar {
  width: 41%;
}

.bar-42 .growing-bar {
  width: 42%;
}

.bar-43 .growing-bar {
  width: 43%;
}

.bar-44 .growing-bar {
  width: 44%;
}

.bar-45 .growing-bar {
  width: 45%;
}

.bar-46 .growing-bar {
  width: 46%;
}

.bar-47 .growing-bar {
  width: 47%;
}

.bar-48 .growing-bar {
  width: 48%;
}

.bar-49 .growing-bar {
  width: 49%;
}

.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {
  width: 50%;
}

.bar-51 .growing-bar {
  width: 51%;
}

.bar-52 .growing-bar {
  width: 52%;
}

.bar-53 .growing-bar {
  width: 53%;
}

.bar-54 .growing-bar {
  width: 54%;
}

.bar-55 .growing-bar {
  width: 55%;
}

.bar-56 .growing-bar {
  width: 56%;
}

.bar-57 .growing-bar {
  width: 57%;
}

.bar-58 .growing-bar {
  width: 58%;
}

.bar-59 .growing-bar {
  width: 59%;
}

.bar-60 .growing-bar {
  width: 60%;
}

.bar-61 .growing-bar {
  width: 61%;
}

.bar-62 .growing-bar {
  width: 62%;
}

.bar-63 .growing-bar {
  width: 63%;
}

.bar-64 .growing-bar {
  width: 64%;
}

.bar-65 .growing-bar {
  width: 65%;
}

.bar-66 .growing-bar {
  width: 66%;
}

.bar-67 .growing-bar {
  width: 67%;
}

.bar-68 .growing-bar {
  width: 68%;
}

.bar-69 .growing-bar {
  width: 69%;
}

.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 70%;
}

.bar-71 .growing-bar {
  width: 71%;
}

.bar-72 .growing-bar {
  width: 72%;
}

.bar-73 .growing-bar {
  width: 73%;
}

.bar-74 .growing-bar {
  width: 74%;
}

.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {
  width: 75%;
}

.bar-76 .growing-bar {
  width: 76%;
}

.bar-77 .growing-bar {
  width: 77%;
}

.bar-78 .growing-bar {
  width: 78%;
}

.bar-79 .growing-bar {
  width: 79%;
}

.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 80%;
}

.bar-81 .growing-bar {
  width: 81%;
}

.bar-82 .growing-bar {
  width: 82%;
}

.bar-83 .growing-bar {
  width: 83%;
}

.bar-84 .growing-bar {
  width: 84%;
}

.bar-85 .growing-bar {
  width: 85%;
}

.bar-86 .growing-bar {
  width: 86%;
}

.bar-87 .growing-bar {
  width: 87%;
}

.bar-88 .growing-bar {
  width: 88%;
}

.bar-89 .growing-bar {
  width: 89%;
}

.bar-90 .growing-bar {
  width: 90%;
}

.bar-91 .growing-bar {
  width: 91%;
}

.bar-92 .growing-bar {
  width: 92%;
}

.bar-93 .growing-bar {
  width: 93%;
}

.bar-94 .growing-bar {
  width: 94%;
}

.bar-95 .growing-bar {
  width: 95%;
}

.bar-96 .growing-bar {
  width: 96%;
}

.bar-97 .growing-bar {
  width: 97%;
}

.bar-98 .growing-bar {
  width: 98%;
}

.bar-99 .growing-bar {
  width: 99%;
}

.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
  width: 100%;
}

## script.js
$(function() {
  const progressBar = { max: 30000, value: 0 };
  let previewClass = "bar-0";
  let newClass = "";
  let interval;

  function increment() {
    if (!newClass) {
      $(".getting-there").html(
        'LOADING DATA...<br> <p style="position:absolute;text-align: center;width: 100%;"><span id="count">0</span> / 30000 bytes</p>'
      );
    }

    document.getElementById("count").innerHTML = progressBar.value.toString();
    let double = (Math.round(((progressBar.value * 100) / progressBar.max) * 100) / 100);
    newClass = 'bar-' + Math.round(double);

    document.getElementById("liquidBar").classList.remove(previewClass);
    document.getElementById("liquidBar").classList.add(newClass);

    previewClass = newClass;
    $(".binary").addClass('d-show').removeClass('d-none');
    $(".loader").addClass('JS_on').removeClass('JS_off');

    if(progressBar.value === progressBar.max) {
      clearInterval(interval);
      $('.getting-there').text('DATA LOADED!');
      $(".binary").addClass('d-none').removeClass('d-show');
      $(".loader").addClass('JS_off').removeClass('JS_on');
    }
  }

  setTimeout(function() {
    interval = setInterval(function() {
      progressBar.value = progressBar.value + 10;
      increment();
    }, 10)
  }, 3000)

});
	.loader {
	width: 350px;
	height: 170px;
	position: relative;
	}

	.loader::before, .loader::after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 30px;
	left: 15px;
	z-index: 1;
	border-left: 170px solid transparent;
	border-right: 170px solid transparent;
	border-bottom: 31px solid #1b2a33;
	transform: scale(0);
	transition: all 0.2s ease;
	}

	.loader::after {
	border-right: 15px solid transparent;
	border-bottom: 30px solid #162229;
	}

	.loader .getting-there {
	width: 120%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: -7%;
	font-family: "Lato";
	font-size: 12px;
	letter-spacing: 2px;
	color: white;
	}

	.loader .binary {
	width: 100%;
	height: 140px;
	display: block;
	color: white;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
	}

	.loader .binary::before, .loader .binary::after {
	font-family: "Lato";
	font-size: 24px;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	animation-iteration-count: 3;

	}

	.loader .binary.false::before {
	content: "0";
	}

	.loader .binary.false::after {
	content: "0";
	}

	.loader .binary.true::before {
	content: "1";
	}

	.loader .binary.true::after {
	content: "1";
	}

	.loader .binary:nth-of-type(1)::before {
	animation: a 1.5s linear infinite;
	left: 107px;
	}

	.loader .binary:nth-of-type(1)::after {
	animation: b 1.3s linear infinite;
	left: 190px;
	}

	.loader .binary:nth-of-type(2)::before {
	animation: c 1.3s linear infinite;
	left: 130px;
	}

	.loader .binary:nth-of-type(2)::after {
	animation: d 1.8s linear infinite;
	left: 60px;
	}

	.loader .binary:nth-of-type(3)::before {
	animation: e 1.7s linear infinite;
	left: 140px;
	}

	.loader .binary:nth-of-type(3)::after {
	animation: f 1.1s linear infinite;
	left: 5px;
	}

	.loader .binary:nth-of-type(4)::before {
	animation: g 1.7s linear infinite;
	left: 220px;
	}

	.loader .binary:nth-of-type(4)::after {
	animation: h 1.1s linear infinite;
	left: 120px;
	}

	.loader.JS_on::before, .loader.JS_on::after {
	transform: scale(1);
	}

	@keyframes a {
	0% {
	transform: translate(30px, 0) rotate(30deg);
	opacity: 0;
	}
	100% {
	transform: translate(30px, 150px) rotate(-50deg);
	opacity: 1;
	}
	}

	@keyframes b {
	0% {
	transform: translate(50px, 0) rotate(-40deg);
	opacity: 0;
	}
	100% {
	transform: translate(40px, 150px) rotate(80deg);
	opacity: 1;
	}
	}

	@keyframes c {
	0% {
	transform: translate(70px, 0) rotate(10deg);
	opacity: 0;
	}
	100% {
	transform: translate(60px, 150px) rotate(70deg);
	opacity: 1;
	}
	}

	@keyframes d {
	0% {
	transform: translate(30px, 0) rotate(-50deg);
	opacity: 0;
	}
	100% {
	transform: translate(45px, 150px) rotate(30deg);
	opacity: 1;
	}
	}

	@keyframes e {
	0% {
	transform: translate(30px, 0) rotate(-30deg);
	opacity: 0;
	}
	100% {
	transform: translate(45px, 150px) rotate(50deg);
	opacity: 1;
	}
	}

	@keyframes f {
	0% {
	transform: translate(60px, 0) rotate(50deg);
	opacity: 0;
	}
	100% {
	transform: translate(70px, 150px) rotate(10deg);
	opacity: 1;
	}
	}

	@keyframes g {
	0% {
	transform: translate(60px, 0) rotate(-90deg);
	opacity: 0;
	}
	100% {
	transform: translate(40px, 150px) rotate(40deg);
	opacity: 1;
	}
	}

	@keyframes h {
	0% {
	transform: translate(30px, 0) rotate(50deg);
	opacity: 0;
	}
	100% {
	transform: translate(30px, 150px) rotate(-30deg);
	opacity: 1;
	}
	}
	<html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
	<link rel="stylesheet" href="./binary-entry.css">
	<link rel="stylesheet" href="./loading-bar.css">
	</head>
	<body>
	<div class="chart col-6 mx-auto">
	<div class="binary-entry">
	<div class="loader JS_off d-md-block d-none">
	<span class="d-none binary true"></span>
	<span class="d-none binary false"></span>
	<span class="d-none binary true"></span>
	<span class="d-none binary false"></span>
	<span class="getting-there">WAITING RESPONSE...</span>
	</div>
	</div>

	<div class="bar bar-0 cyan" id="liquidBar">
	<div class="face top">
	<div class="growing-bar"></div>
	</div>
	<div class="face side-0">
	<div class="growing-bar"></div>
	</div>
	<div class="face floor">
	<div class="growing-bar"></div>
	</div>
	<div class="face side-a"></div>
	<div class="face side-b"></div>
	<div class="face side-1">
	<div class="growing-bar"></div>
	</div>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</body>
	</html>
	.chart {
	font-size: 1em;
	perspective: 1000px;
	perspective-origin: 50% 50%;
	backface-visibility: visible;
	}

	.bar {
	font-size: 1em;
	position: relative;
	height: 10em;
	transition: all 0.3s ease-in-out;
	transform: rotateX(60deg) rotateY(0deg);
	transform-style: preserve-3d;
	}

	.bar .face {
	font-size: 2em;
	position: relative;
	width: 100%;
	height: 2em;
	background-color: rgba(254, 254, 254, 0.3);
	}

	.bar .face.side-a, .bar .face.side-b {
	width: 2em;
	}

	.bar .side-a {
	transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
	}

	.bar .side-b {
	transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
	position: absolute;
	right: 0;
	}

	.bar .side-0 {
	transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
	}

	.bar .side-1 {
	transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
	}

	.bar .top {
	transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
	}

	.bar .floor {
	box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
	}

	.growing-bar {
	transition: all 0.3s ease-in-out;
	background-color: rgba(236, 0, 140, 0.6);
	width: 100%;
	height: 2em;
	}

	.bar.yellow .side-a,
	.bar.yellow .growing-bar {
	background-color: rgba(241, 196, 15, 0.6);
	}

	.bar.yellow .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em rgba(241, 196, 15, 0.8);
	}

	.bar.yellow .floor .growing-bar {
	box-shadow: 0em 0em 2em rgba(241, 196, 15, 0.8);
	}

	.bar.red .side-a, input[id='red']:checked ~ .chart .side-a,
	.bar.red .growing-bar,
	input[id='red']:checked ~ .chart .growing-bar {
	background-color: rgba(236, 0, 140, 0.6);
	}

	.bar.red .side-0 .growing-bar, input[id='red']:checked ~ .chart .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, 0.8);
	}

	.bar.red .floor .growing-bar, input[id='red']:checked ~ .chart .floor .growing-bar {
	box-shadow: 0em 0em 2em rgba(236, 0, 140, 0.8);
	}

	.bar.cyan .side-a, input[id='cyan']:checked ~ .chart .side-a,
	.bar.cyan .growing-bar,
	input[id='cyan']:checked ~ .chart .growing-bar {
	background-color: rgba(0, 59, 150, 0.6);
	}

	.bar.cyan .side-0 .growing-bar, input[id='cyan']:checked ~ .chart .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em #003b96;
	}

	.bar.cyan .floor .growing-bar, input[id='cyan']:checked ~ .chart .floor .growing-bar {
	box-shadow: 0em 0em 2em #003b96;
	}

	.bar.navy .side-a,
	.bar.navy .growing-bar {
	background-color: rgba(10, 64, 105, 0.6);
	}

	.bar.navy .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em rgba(10, 64, 105, 0.8);
	}

	.bar.navy .floor .growing-bar {
	box-shadow: 0em 0em 2em rgba(10, 64, 105, 0.8);
	}

	.bar.lime .side-a, input[id='lime']:checked ~ .chart .side-a,
	.bar.lime .growing-bar,
	input[id='lime']:checked ~ .chart .growing-bar {
	background-color: rgba(255, 51, 72, 0.6);
	}

	.bar.lime .side-0 .growing-bar, input[id='lime']:checked ~ .chart .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em #ff3348;
	}

	.bar.lime .floor .growing-bar, input[id='lime']:checked ~ .chart .floor .growing-bar {
	box-shadow: 0em 0em 2em #ff3348;
	}

	.bar.white .side-a,
	.bar.white .growing-bar {
	background-color: rgba(254, 254, 254, 0.6);
	}

	.bar.white .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em #fefefe;
	}

	.bar.white .floor .growing-bar {
	box-shadow: 0em 0em 2em #fefefe;
	}

	.bar.gray .side-a,
	.bar.gray .growing-bar {
	background-color: rgba(68, 68, 68, 0.6);
	}

	.bar.gray .side-0 .growing-bar {
	box-shadow: -0.5em -1.5em 4em #444;
	}

	.bar.gray .floor .growing-bar {
	box-shadow: 0em 0em 2em #444;
	}

	.chart .bar.yellow-face .face {
	background-color: rgba(241, 196, 15, 0.2);
	}

	.chart .bar.lime-face .face {
	background-color: rgba(255, 51, 72, 0.2);
	}

	.chart .bar.red-face .face {
	background-color: rgba(236, 0, 140, 0.2);
	}

	.chart .bar.navy-face .face {
	background-color: rgba(10, 64, 105, 0.2);
	}

	.chart .bar.cyan-face .face {
	background-color: rgba(0, 59, 150, 0.2);
	}

	.chart .bar.gray-face .face {
	background-color: rgba(68, 68, 68, 0.2);
	}

	.chart .bar.lightGray-face .face {
	background-color: rgba(145, 145, 145, 0.2);
	}

	.bar-0 .growing-bar {
	width: 0%;
	}

	.bar-1 .growing-bar {
	width: 1%;
	}

	.bar-2 .growing-bar {
	width: 2%;
	}

	.bar-3 .growing-bar {
	width: 3%;
	}

	.bar-4 .growing-bar {
	width: 4%;
	}

	.bar-5 .growing-bar {
	width: 5%;
	}

	.bar-6 .growing-bar {
	width: 6%;
	}

	.bar-7 .growing-bar {
	width: 7%;
	}

	.bar-8 .growing-bar {
	width: 8%;
	}

	.bar-9 .growing-bar {
	width: 9%;
	}

	.bar-10 .growing-bar {
	width: 10%;
	}

	.bar-11 .growing-bar {
	width: 11%;
	}

	.bar-12 .growing-bar {
	width: 12%;
	}

	.bar-13 .growing-bar {
	width: 13%;
	}

	.bar-14 .growing-bar {
	width: 14%;
	}

	.bar-15 .growing-bar {
	width: 15%;
	}

	.bar-16 .growing-bar {
	width: 16%;
	}

	.bar-17 .growing-bar {
	width: 17%;
	}

	.bar-18 .growing-bar {
	width: 18%;
	}

	.bar-19 .growing-bar {
	width: 19%;
	}

	.bar-20 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar {
	width: 20%;
	}

	.bar-21 .growing-bar {
	width: 21%;
	}

	.bar-22 .growing-bar {
	width: 22%;
	}

	.bar-23 .growing-bar {
	width: 23%;
	}

	.bar-24 .growing-bar {
	width: 24%;
	}

	.bar-25 .growing-bar, input[id='pos-0']:checked ~ .chart .growing-bar {
	width: 25%;
	}

	.bar-26 .growing-bar {
	width: 26%;
	}

	.bar-27 .growing-bar {
	width: 27%;
	}

	.bar-28 .growing-bar {
	width: 28%;
	}

	.bar-29 .growing-bar {
	width: 29%;
	}

	.bar-30 .growing-bar {
	width: 30%;
	}

	.bar-31 .growing-bar {
	width: 31%;
	}

	.bar-32 .growing-bar {
	width: 32%;
	}

	.bar-33 .growing-bar {
	width: 33%;
	}

	.bar-34 .growing-bar {
	width: 34%;
	}

	.bar-35 .growing-bar {
	width: 35%;
	}

	.bar-36 .growing-bar {
	width: 36%;
	}

	.bar-37 .growing-bar {
	width: 37%;
	}

	.bar-38 .growing-bar {
	width: 38%;
	}

	.bar-39 .growing-bar {
	width: 39%;
	}

	.bar-40 .growing-bar {
	width: 40%;
	}

	.bar-41 .growing-bar {
	width: 41%;
	}

	.bar-42 .growing-bar {
	width: 42%;
	}

	.bar-43 .growing-bar {
	width: 43%;
	}

	.bar-44 .growing-bar {
	width: 44%;
	}

	.bar-45 .growing-bar {
	width: 45%;
	}

	.bar-46 .growing-bar {
	width: 46%;
	}

	.bar-47 .growing-bar {
	width: 47%;
	}

	.bar-48 .growing-bar {
	width: 48%;
	}

	.bar-49 .growing-bar {
	width: 49%;
	}

	.bar-50 .growing-bar, input[id='pos-1']:checked ~ .chart .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar {
	width: 50%;
	}

	.bar-51 .growing-bar {
	width: 51%;
	}

	.bar-52 .growing-bar {
	width: 52%;
	}

	.bar-53 .growing-bar {
	width: 53%;
	}

	.bar-54 .growing-bar {
	width: 54%;
	}

	.bar-55 .growing-bar {
	width: 55%;
	}

	.bar-56 .growing-bar {
	width: 56%;
	}

	.bar-57 .growing-bar {
	width: 57%;
	}

	.bar-58 .growing-bar {
	width: 58%;
	}

	.bar-59 .growing-bar {
	width: 59%;
	}

	.bar-60 .growing-bar {
	width: 60%;
	}

	.bar-61 .growing-bar {
	width: 61%;
	}

	.bar-62 .growing-bar {
	width: 62%;
	}

	.bar-63 .growing-bar {
	width: 63%;
	}

	.bar-64 .growing-bar {
	width: 64%;
	}

	.bar-65 .growing-bar {
	width: 65%;
	}

	.bar-66 .growing-bar {
	width: 66%;
	}

	.bar-67 .growing-bar {
	width: 67%;
	}

	.bar-68 .growing-bar {
	width: 68%;
	}

	.bar-69 .growing-bar {
	width: 69%;
	}

	.bar-70 .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(1) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(2) .growing-bar, input[id='exercise-3']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
	width: 70%;
	}

	.bar-71 .growing-bar {
	width: 71%;
	}

	.bar-72 .growing-bar {
	width: 72%;
	}

	.bar-73 .growing-bar {
	width: 73%;
	}

	.bar-74 .growing-bar {
	width: 74%;
	}

	.bar-75 .growing-bar, input[id='pos-2']:checked ~ .chart .growing-bar {
	width: 75%;
	}

	.bar-76 .growing-bar {
	width: 76%;
	}

	.bar-77 .growing-bar {
	width: 77%;
	}

	.bar-78 .growing-bar {
	width: 78%;
	}

	.bar-79 .growing-bar {
	width: 79%;
	}

	.bar-80 .growing-bar, input[id='exercise-2']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
	width: 80%;
	}

	.bar-81 .growing-bar {
	width: 81%;
	}

	.bar-82 .growing-bar {
	width: 82%;
	}

	.bar-83 .growing-bar {
	width: 83%;
	}

	.bar-84 .growing-bar {
	width: 84%;
	}

	.bar-85 .growing-bar {
	width: 85%;
	}

	.bar-86 .growing-bar {
	width: 86%;
	}

	.bar-87 .growing-bar {
	width: 87%;
	}

	.bar-88 .growing-bar {
	width: 88%;
	}

	.bar-89 .growing-bar {
	width: 89%;
	}

	.bar-90 .growing-bar {
	width: 90%;
	}

	.bar-91 .growing-bar {
	width: 91%;
	}

	.bar-92 .growing-bar {
	width: 92%;
	}

	.bar-93 .growing-bar {
	width: 93%;
	}

	.bar-94 .growing-bar {
	width: 94%;
	}

	.bar-95 .growing-bar {
	width: 95%;
	}

	.bar-96 .growing-bar {
	width: 96%;
	}

	.bar-97 .growing-bar {
	width: 97%;
	}

	.bar-98 .growing-bar {
	width: 98%;
	}

	.bar-99 .growing-bar {
	width: 99%;
	}

	.bar-100 .growing-bar, input[id='pos-3']:checked ~ .chart .growing-bar, input[id='exercise-4']:checked ~ .chart.grid .exercise .bar:nth-child(3) .growing-bar {
	width: 100%;
	}
	$(function() {
	const progressBar = { max: 30000, value: 0 };
	let previewClass = "bar-0";
	let newClass = "";
	let interval;

	function increment() {
	if (!newClass) {
	$(".getting-there").html(
	'LOADING DATA...<br> <p style="position:absolute;text-align: center;width: 100%;"><span id="count">0</span> / 30000 bytes</p>'
	);
	}

	document.getElementById("count").innerHTML = progressBar.value.toString();
	let double = (Math.round(((progressBar.value * 100) / progressBar.max) * 100) / 100);
	newClass = 'bar-' + Math.round(double);

	document.getElementById("liquidBar").classList.remove(previewClass);
	document.getElementById("liquidBar").classList.add(newClass);

	previewClass = newClass;
	$(".binary").addClass('d-show').removeClass('d-none');
	$(".loader").addClass('JS_on').removeClass('JS_off');

	if(progressBar.value === progressBar.max) {
	clearInterval(interval);
	$('.getting-there').text('DATA LOADED!');
	$(".binary").addClass('d-none').removeClass('d-show');
	$(".loader").addClass('JS_off').removeClass('JS_on');
	}
	}

	setTimeout(function() {
	interval = setInterval(function() {
	progressBar.value = progressBar.value + 10;
	increment();
	}, 10)
	}, 3000)

	});