JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>           
</div>

CSS

#progress {
            position: fixed;
            z-index: 2147483647;
            top: 0;
            left: -6px;
            width: 0%;
            height: 2px;
            background: #b91f1f;
            -moz-border-radius: 1px;
            -webkit-border-radius: 1px;
            border-radius: 1px;
            -moz-transition: width 500ms ease-out, opacity 400ms linear;
            -ms-transition: width 500ms ease-out, opacity 400ms linear;
            -o-transition: width 500ms ease-out, opacity 400ms linear;
            -webkit-transition: width 500ms ease-out, opacity 400ms linear;
            transition: width 500ms ease-out, opacity 400ms linear
        }
        #progress.done {
            opacity: 0
        }
        #progress dd,
        #progress dt {
            position: absolute;
            top: 0;
            height: 2px;
            -moz-box-shadow: #b91f1f 1px 0 6px 1px;
            -ms-box-shadow: #b91f1f 1px 0 6px 1px;
            -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
            box-shadow: #b91f1f 1px 0 6px 1px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%
        }
        #progress dd {
            opacity: 1;
            width: 20px;
            right: 0;
            clip: rect(-6px, 22px, 14px, 10px)
        }
        #progress dt {
            opacity: 1;
            width: 180px;
            right: -80px;
            clip: rect(-6px, 90px, 14px, -6px)
        }
        @-moz-keyframes pulse {
            30% {
                opacity: 1
            }
            60% {
                opacity: 0
            }
            100% {
                opacity: 1
            }
        }
        @-ms-keyframes pulse {
            30% {
                opacity: .6
            }
            60% {
                opacity: 0
            }
            100% {
                opacity: .6
            }
        }
        @-o-keyframes pulse {
            30% {
               ...

JavaScript

/*$({
                property: 0
            }).animate({
                property: 105
            }, {
                duration: 4000,
                step: function () {
                    var _percent = Math.round(this.property);
                    $('#progress').css('width', _percent + "%");
                    if (_percent == 105) {
                        $("#progress").addClass("done");
                    }
                },
                complete: function () {
                    alert('complete');
                }
            });*/

$("#progress").animate( { width: 100% },
                         { duration: 4000 }
                      );