JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progressbar"></div>
<p id = "splashscreen-links"><a>Login</a>&nbsp;&bull;&nbsp;<a>Register</a></p>

CSS

@-webkit-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}

@-moz-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@-ms-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@-o-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

#progressbar {
    /* Dimensions */
    width: 250px;
    height: 16px;
    overflow: hidden;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 5px;
    padding-top: 4px;
    padding-left: 17px;
    
    /* Styling */
    background: #E6E6E6;
    border:1px solid #bbb;
    border-radius:0px;
}

#progressbar:after {
    content: " ";
    display: block;
    width: 120px;
    top: -50%;
    height: 250%;
    position: absolute;
    animation: greenglow 2s linear infinite;
    -webkit-animation: greenglow 2s linear infinite;
    z-index: 2;
    background: #1CAE30;
}

#splashscreen-links {
    /* Text */
    color: #999999;
    font-family: "Arial";
    text-decoration: none;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 5px;
    padding-top: 4px;
    padding-left: 17px;
    
    /* Visibility */
    display: none;
}

JavaScript

window.onload = function() {
  'use strict';
  setTimeout(function() {
    var timer = setTimeout(function() {
      var progressbar = document.getElementById('progressbar')
      var opacity = 1;
      if (opacity <= 0.1) {
        clearInterval(timer);
        progressbar.style.display = 'none';
      }
      progressbar.style.opacity = opacity;
      progressbar.style.filter = "alpha(opacity=" + opacity * 100 + ")";
      opacity -= opacity * 0.1;
    }, 500);
  }, 4000);

  var timer2 = setTimeout(function() {
    var links = document.getElementById('splashscreen-links');
    var opacity = 0.1;
    links.style.display = 'block';
    if (opacity >= 1) {
      clearInterval(timer2);
    }
    links.style.opacity = opacity;
    links.style.filter = 'alpha(opacity=' + opacity * 100 + ")";
    opacity += opacity * 0.1;
  }, 500);
};