JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<a id="submitButton" data-loading="Отправляю.." data-finished="Готово!" href="#" class="progress-button">Отправить</a>
	<a id="actionButton" href="#" class="progress-button green" data-loading="Гружу.." data-finished="Готово!" data-type="background-bar">Загрузить!</a>
	<a id="generateButton" href="#" class="progress-button red" data-loading="Генерирую..." data-finished="Скачать" data-type="background-vertical">Сгенерировать</a>

<br/>
<br/>

<a id="controlButton" data-loading="Гружу.." data-finished="Готово!" href="#" class="progress-button">Старт</a>

<div class="control-area">
    <a class="command increment">+10%</a>
	<a class="command set-to-1">1%</a>
	<a class="command set-to-50">50%</a>
	<a class="command finish">100%</a>
</div>

CSS

div.control-area {
    font: bold 14px'Raleway', sans-serif;
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    color:#888;
}
div.control-area a {
    display: inline-block;
    cursor: pointer;
    margin: 7px auto;
    background-color: #fdfdfd;
    border-radius: 2px;
    padding: 8px 10px;
    font-size: 13px;
    text-transform: uppercase;
}
div.control-area a:hover {
    background-color: #fff;
    box-shadow:0 1px 1px #dfdfdf;
}
/*-------------------------
	The buttons
--------------------------*/
 .progress-button {
    display: inline-block;
    font-size:24px;
    color:#fff !important;
    text-decoration: none !important;
    padding:14px 60px;
    line-height:1;
    overflow: hidden;
    position:relative;
    box-shadow:0 1px 1px #ccc;
    border-radius:2px;
    background-color: #51b7e6;
    background-image:-webkit-linear-gradient(top, #51b7e6, #4dafdd);
    background-image:-moz-linear-gradient(top, #51b7e6, #4dafdd);
    background-image:linear-gradient(top, #51b7e6, #4dafdd);
}
/*	Hide the original text of the button. Then the loading or finished
	text will be shown in the :after element above it. */
 .progress-button.in-progress, .progress-button.finished {
    color:transparent !important;
}
.progress-button.in-progress:after, .progress-button.finished:after {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    padding-top: inherit;
    color: #fff !important;
    left: 0;
}
/*	If the .in-progress class is set on the button, show the
	contents of the data-loading attribute on the butotn */
 .progress-button.in-progress:after {
    content:attr(data-loading);
}
/* The same goes for the .finished class */
 .progress-button.finished:after {
    content:attr(data-finished);
}
/* The colorful bar that grows depending on the progress */
 .progress-button .tz-bar {
    background-color:#e667c0;
    height:3px;
    bottom:0;
    left:0;
   ...

JavaScript

$(document).ready(function () {

    // Convert all the links with the progress-button class to
    // actual buttons with progress meters.
    // You need to call this function once the page is loaded.
    // If you add buttons later, you will need to call the function only for them.

    $('.progress-button').progressInitialize();

    // Listen for clicks on the first three buttons, and start
    // the progress animations

    $('#submitButton').click(function (e) {
        e.preventDefault();

        // This function will show a progress meter for
        // the specified amount of time

        $(this).progressTimed(2);
    });

    $('#actionButton').click(function (e) {
        e.preventDefault();
        $(this).progressTimed(2);
    });

    $('#generateButton').one('click', function (e) {
        e.preventDefault();

        // It can take a callback

        var button = $(this);
        button.progressTimed(3, function () {

            // In this callback, you can set the href attribute of the button
            // to the URL of the generated file. For the demo, we will only
            // set up a new event listener that alerts a message.

            button.click(function () {
                alert('Showing how a callback works!');
            });
        });
    });


    // Custom progress handling

    var controlButton = $('#controlButton');

    controlButton.click(function (e) {
        e.preventDefault();

        // You can optionally call the progressStart function.
        // It will simulate activity every 2 seconds if the
        // progress meter has not been incremented.

        controlButton.progressStart();
    });

    $('.command.increment').click(function () {

        // Increment the progress bar with 10%. Pass a number
        // as an argument to increment with a different amount.

        controlButton.progressIncrement();
    });

    $('.command.set-to-1').click(function () {

        // Set the progress meter to the...