JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div id="mp3DownloaderStats">
    <p><span id="mp3artist"></span>-<span id="mp3title"></span></p>
    <p>Total:<span id="mp3total">4.8 MiB</span></p>
    <p>Loaded:<span id="mp3loaded">4.8 MiB</span></p>
    <div id="mp3overlay"></div></div>

CSS

#mp3DownloaderStats {
    position: fixed; 
    top: 5px; 
    right: 10px; 
    width: auto; 
    height: auto; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 3px; 
    box-shadow: rgba(0, 0, 0, 0.298039) 5px 5px 25px; 
    padding: 1px 10px; 
    color: rgba(0, 0, 0, 0.701961); 
    text-shadow: rgba(255, 255, 255, 0.701961) 0px 1px; 
    z-index: 10000; 
    background-color: rgba(0, 0, 0, 0.2);
}
#mp3overlay {
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    background-color: rgba(0, 180, 0, 0.3);
}

JavaScript

window.onmessage = function(event) {
    event.source.postMessage(document, event.origin);
};
(function ($) {
    
    var loaderIcon = "//vk.com/images/upload.gif",
        diskIcon = "//pp.vk.me/c621623/v621623449/44152/Yle7-Y3mCXc.jpg",
        diskIconExclamation = "//pp.vk.me/c621623/v621623449/44144/f4QPS2GGoXI.jpg";
    
    $("body").append('<div id="mp3DownloaderStats" style="display:none;position: fixed;top: 5px;right: 10px;width: auto;height: auto;background-color: rgba(0,0,0,0.2);border: 1px solid rgba(0,0,0,0.2);border-radius: 3px;box-shadow: 5px 5px 25px rgba(0,0,0,0.3);padding: 1px 10px;color: rgba(0,0,0,0.7);text-shadow: 0 1px rgba(255,255,255,0.7);z-index:10000;"><p><span id="mp3artist"></span>-<span id="mp3title"></span></p><p>Total:<span id="mp3total"></span></p><p>Loaded:<span id="mp3loaded"></span></p><div id="mp3overlay" style="position: absolute;top: 0;bottom: 0;left: 0;width: 0%;background-color: rgba(0,180,0,0.3);"></div></div>');
    
    var statsDiv = $("#mp3DownloaderStats"),
        progress = $("#mp3overlay"),
        mapping = {"title" : "", "artist" : "", "total" : "", "loaded" : ""};
    
    function bytesToString(bytes, si) {
        var thresh = si ? 1000 : 1024;
        if(Math.abs(bytes) < thresh) {
            return bytes + ' B';
        }
        var units = si
            ? ['kB','MB','GB','TB','PB','EB','ZB','YB']
            : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
        var u = -1;
        do {
            bytes /= thresh;
            ++u;
        } while(Math.abs(bytes) >= thresh && u < units.length - 1);
        return bytes.toFixed(1)+' '+units[u];
    }
    
    function setIconAs(type, button){
        if(type == "disk"){
            button.css("marginTop", "6px").find("img").attr("src", diskIcon);
        } else if(type == "loader") {
            button.css("marginTop", "9px").find("img").attr("src", loaderIcon);
        } else if(type == "exclamation") {
            button.css("marginTop",...