JSFiddle - React, Tailwind, and code Playground

HTML

<div id="skan">
    <p>SKANER ANTYWIRUSOWY</p> <em>powered by VirusTotal.com</em>

    <button onclick="x()" id="b1">Rozpocznij skanowanie tego pliku</button>
    <div id="paski">
        <div>
            <label>Avast</label>
            <progress id="p1" value="0" max="100"></progress>
        </div>
        <div>
            <label>Panda</label>
            <progress id="p2" value="0" max="100"></progress>
        </div>
        <div>
            <label>Kaspersky</label>
            <progress id="p3" value="0" max="100"></progress>
        </div>
    </div>
    <div id="raport">Plik nie zawiera szkodliwego oprogramowania!</div>
    <a class="author" href="http://linoskoczek.eu">linoskoczek</a>
</div>

CSS

/* ======== CREDITS ========
Do not remove these lines!
Code: http://linoskoczek.eu
Image: http://www.flaticon.com */
 @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
.author {display: none;}
 #skan {
    height: 220px;
    background-size: 200px 200px;
    color: #FFF;
    font-family: Open Sans Condensed, Arial;
    background-color: #3498db;
    border-radius: 5px;
    width: 80%;
    padding: 40px;
    transition: all .7s ease;
}
#skan > p {
    text-align: center;
    font-weight: 300;
    font-size: 40px;
    margin: 0;
    text-decoration: underline;
}
#skan > em {
    display: block;
    font-size: 0.8em;
    width: 380px;
    margin 0 auto 20px auto;
    text-align: right;
}
#skan button {
    color: #FFF;
    width: 100%;
    margin-top: 45px;
    height: 70px;
    font-size: 1.4em;
    font-family: Open Sans Condensed, Arial;
    background-color: #ff5454;
    border-radius: 6px;
    border: 0;
    transition: all .5s ease;
}
#skan button:hover {
    transform: scale(1.05);
}
#skan #paski {
    opacity: 0;
}
#skan div > label {
    display: block;
    margin-left: 15px;
}

#skan div > progress {
    width: 100%;
    height: 10px;
    border: 2px solid #FFF;
    background-color: #FFF;
    border-radius: 3px;
}
#skan div > progress::-webkit-progress-bar {
    background-color: #FFF;
}
#skan div > progress::-webkit-progress-value {
    background-color: #535eb7;
}
#skan div > progress::-moz-progress-bar {
    background-color: #535eb7;
}
#skan div > progress[value="0"]::-moz-progress-bar {
    background-color: blue;
}
#skan div > progress[value="100"]::-webkit-progress-value {
    background-color: #00a41b;
}
#skan div > progress[value="100"]::-moz-progress-bar {
    background-color: #00a41b;
}

#skan > #raport {
    background-color: #FFF;
    border-radius: 6px;
    font-size: 25px;
    padding: 0 10px 10px 10px;
    opacity: 0;
    transition: all 3s ease;
    margin-top: 65px;
    text-align: center;
    color: green;
 ...

JavaScript

/* ======== CREDITS ========
Do not remove those lines!
Code: http://linoskoczek.eu */
var laduj;

function x() {
    document.getElementById("b1").style.display = "none";
    document.getElementById("paski").style.opacity = "1";
    laduj = setInterval(function () {
        zmien()
    }, 25);
}

function zmien() {
    if (document.getElementById("p1").value != "100") document.getElementById("p1").value += 1;
    else if (document.getElementById("p2").value != "100") document.getElementById("p2").value += 1;
    else if (document.getElementById("p3").value != "100") document.getElementById("p3").value += 1;
    else {
        window.clearInterval(laduj);
        document.getElementById("skan").style.height = "400px";
        document.getElementById("skan").style.background = '#3498db url("http://i.epvpimg.com/ddl1h.png") no-repeat bottom right';
        document.getElementById("raport").style.opacity = "1";
    }
}