Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Binary Entry + Progress Bar - https://codepen.io/sertxudeveloper/pen/dwOdxO
.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)
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment