JSFiddle - React, Tailwind, and code Playground

by Aaron Kahlhamer

HTML

<div class="progress-bar hidden">
        <div class="progress-bar--line"></div>
    </div>


<a class="js-progress-bar" href="">Click to Show Progress Bar</a>

CSS

.hidden {
    display: none;
}

.progress-bar {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    height: 2em;
    width: 18em;
    background: rgba(255, 255, 255, .5);
}

.progress-bar--line {
    height: 12px;
    width: 0;
    background: rgba(0, 0, 0, .9);
    -webkit-animation: lineloader 2.1s 1 forwards;
    -moz-animation: lineloader 2.1s 1 forwards;
}
/* Keyframes */

@-webkit-keyframes lineloader {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@-moz-keyframes lineloader {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

JavaScript

var $progressBar         = $('.progress-bar'),
    progressBarVisible 	 = false;


function removeProgressBar() {

	if ( progressBarVisible ) {
		
		
		// setTimeout(function() {
			
			// hide progress bar
			$progressBar.addClass('hidden');
		
			// progress bar is hidden
			progressBarVisible = false;

		// },10);

	}

}


function progressBar(e) {
    
    e.preventDefault();

	if ( progressBarVisible ) { 

		removeProgressBar(); 

	} else {

		// remove display none to show progress bar
		$progressBar.removeClass('hidden');

		// progress bar is visible
		progressBarVisible = true;

	}
}

$('.js-progress-bar').on('click', progressBar);