CodePen Embed - Faking Loading Performance

<div class="demo-view">
	<header role="banner" class="main-header">
		<div class="top-bar">
			<button class="menu-button" type="button">
				<span class="icon-burger"></span>
				<span class="menu-text">Menu</span>
			</button>
			<h1>Brand Name</h1>
		</div>

		<ul class="tabs">
			<li class="current"><a href="#livedemo">Live</a></li>
			<li><a href="#replaydemo">Replay</a></li>
			<li><a href="#newsdemo">News</a></li>
		</ul>
	</header>
	<main class="main-content">
		<ul class="video-list">
			<li>
				<a href="#video-1">
					<figure>
						<img src="https://www.creativejuiz.fr/temp/codepen/video-1.jpg" width="392" height="220" alt="">
						<figcaption>
							<h2 class="video-title">La matière noire</h2>
							<p>Notre Univers serait composé à 80% d'une matière inconnue… vraiment&nbsp;?</p>
						</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a href="#video-2">
					<figure>
						<img src="https://www.creativejuiz.fr/temp/codepen/video-2.png" width="392" height="226" alt="">
						<figcaption>
							<h2 class="video-title">La théorie des cordes</h2>
							<p>La Théorie des Cordes&nbsp;: Qu'est-ce que c'est et à quoi ça sert&nbsp;?</p>
						</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a href="#video-3">
					<figure>
						<img src="https://www.creativejuiz.fr/temp/codepen/video-1.jpg" width="392" height="220" alt="">
						<figcaption>
							<h2 class="video-title">La matière noire</h2>
							<p>Notre Univers serait composé à 80% d'une matière inconnue… vraiment&nbsp;?</p>
						</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a href="#video-4">
					<figure>
						<img src="https://www.creativejuiz.fr/temp/codepen/video-2.png" width="392" height="226" alt="">
						<figcaption>
							<h2 class="video-title">La théorie des cordes</h2>
							<p>La Théorie des Cordes&nbsp;: Qu'est-ce que c'est et à quoi ça sert&nbsp;?</p>
						</figcaption>
					</figure>
				</a>
			</li>
			<li>
				<a href="#video-5">
					<figure>
						<img src="https://www.creativejuiz.fr/temp/codepen/video-1.jpg" width="392" height="220" alt="">
						<figcaption>
							<h2 class="video-title">La matière noire</h2>
							<p>Notre Univers serait composé à 80% d'une matière inconnue… vraiment&nbsp;?</p>
						</figcaption>
					</figure>
				</a>
			</li>
		</ul>
	</main>

	<!-- panel-view -->
	<div id="panel" class="panel">
		<p class="video-title">La matière noire</p>

		<div class="player">
			<div class="player-video-area">
				<div aria-hidden="true" id="loader">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"><path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/><path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"/></path></svg>
					<p>Votre vidéo arrive bientôt…</p>
				</div>
				<img id="video" src="https://www.creativejuiz.fr/temp/codepen/video-1.jpg" width="392" height="200" alt="">
			</div>
			<div class="player-controls">
				<div class="pc-play">
					<span class="icon-play"></span>
				</div>
				<div class="pc-start">
					0:00
				</div>
				<div class="pc-timeline">
					<span class="pct-total"></span>
				</div>
				<div class="pc-end">
					15:03
				</div>
			</div>
		</div>
	</div>
</div>

$dark        : #151921;
$light       : #F2F2F2;
$header      : #2E303D;
$header-text : #82889D;
$loader      : #FF6700;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  line-height: 1.7;
  font-family: Helvetica, Arial, sans-serif;
  color: $light;
  background: $dark;
}

body,
figure,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.demo-view {
  position: relative;
  width: 375px;
  height: 667px;
  background: $light;
  box-shadow: 0 0 15px rgba(0, 0, 0, .4);
  overflow: hidden;
}

.main-header {
  padding: 25px 0 0 0;
  color: $header-text;
  text-align: center;
  background: $header;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  
  h1 {
    flex-basis: 100%;
    margin: 0;
    padding: 0 35px 8px 0;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    word-spacing: 0.1em;
  }
}

.top-bar {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.menu-button {
  flex-basis: 35px;
  border: 0;
  padding: 5px;
  background: transparent;
  color: $light;
  text-align: center;
}

.menu-text {
  display: block;
  margin: 1em;
  font-size: .875em;
  text-transform: uppercase;
}

.icon-burger {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  
  &::after,
  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
  }
  &::before {
      top: -7px;
  }
  &::after {
    bottom: -7px;
  }
}

.tabs {
  display: flex;
  width: 100%;
  margin: 2em 0 0 0;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .3);
  
  a {
    display: block;
    padding: 10px 0;
    font-size: .875em;
    font-weight: bold;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
  }
  
  .current a {
    color: #FFF;
    background: $header;
  }
  
  li {
    flex-basis: 34%;
    padding: 0;
    margin: 0;
  }
  
  li + li {
    border-left: 1px solid $header;
  }
}

.main-content {
  color: $dark;
}

.video-list {
  
  li + li {
    margin-top: 2px;
  }
  a {
    display: block;
    background: #FFF;
    text-decoration: none;
    color: inherit;
  }
  
  figure {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  
  img {
    width: 100px;
    height: auto;
    min-height: auto;
  }
  
  figcaption {
    padding: 0 10px;
  }
}

.video-title {
  margin: 0;
  font-size: 1em;
  
  + p {
    font-size: 0.75em;
    margin: 0;
  }
}


/* panel view */

.panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #20212A;
  color: #F2F2F2;
  box-shadow: -4px 0 15px rgba(0, 0, 0, .4);
  transform: translateX(150%);
  transition: transform 0.475s;
  will-change: transform;
  
  &.visible {
    transform: translateX(0);
  }
}

.panel .video-title {
  padding: 25px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 3px 15px rgba(0, 0, 0, .3);
  transition: transform .275s;
  transform: translateY(-100%);
  will-change: transform;
}

.panel.gogogo .video-title {
  transform: translateY(0);
}

.player-video-area {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 210px;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .4);
  transition: opacity .75s;
  opacity: 0;
  will-change: opacity;
}

.panel.gogogo .player-video-area {
  opacity: 1;
}

.player-controls {
  display: flex;
  padding: 0 5px;
  align-items: center;
}

.player-controls > * {
  padding: 10px;
}

.icon-play {
  display: block;
  border-left: 10px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.pc-timeline {
  position: relative;
  flex-basis: 100%;
}

.pct-total {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  height: 6px;
  background: rgba(255, 255, 255, .3);
  border-radius: 6px;
}


/* transitions */

.icon-play,
.pc-start,
.pct-total,
.pc-end {
  opacity: 0;
  transform: translateY(20px);
  transition: transform .275s, opacity .275s;
  will-change: transform, opacity;
}

.gogogo {
  .icon-play,
  .pc-start,
  .pct-total,
  .pc-end {
    transform: translateY(0);
    opacity: 1;
  }
}


/* transitions timeline (by delay) */

.player-video-area {
  transition-delay: .375s;
}

.icon-play {
  transition-delay: .25s;
}

.pc-start {
  transition-delay: .35s;
}

.pct-total {
  transition-delay: .45s;
}

.pc-end {
  transition-delay: .55s;
}


/* Loader */

[id="loader"] {
  text-align: center;
  color: #AAA;
  opacity: 0;
  transition: opacity .475s;
  will-change: opacity;
  
  path,
  rect {
    fill: $loader;
  }
  
  &.visible {
    opacity: 1;
  }
}


/* Video */

[id="video"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .475s;
  will-change: opacity;
  
  &.visible {
    opacity: 1;
  }
}

View Compiled

var videos = document.querySelectorAll( '[href^="#video-"]' ),
	panel  = document.getElementById( 'panel' ),
	loader = document.getElementById( 'loader' ),
	video  = document.getElementById( 'video' ),
	too, too2;

videos.forEach( function( element ) {
	element.addEventListener( 'click', function(e) {
		e.preventDefault();
		panel.classList.add( 'visible' );
		return false;
	}, false );
});

panel.addEventListener( 'click', function() {
	panel.classList.remove( 'visible' );
	panel.classList.remove( 'gogogo' );
	loader.setAttribute( 'aria-hidden', 'true' );
	loader.classList.remove( 'visible' );
	clearTimeout( too );
	clearTimeout( too2 );

  setTimeout(function(){
     panel.addEventListener( 'transitionend', timeline, false );
  }, 1250);
}, false );

var timeline = function(e) {
	panel.removeEventListener( 'transitionend', timeline, false );

	panel.classList.add( 'gogogo' );

	too = setTimeout( function() {
		loader.setAttribute( 'aria-hidden', 'false' );
		loader.classList.add( 'visible' );
		clearTimeout(too);
	}, 2500);

	too2 = setTimeout( function() {
		loader.setAttribute( 'aria-hidden', 'true' );
		loader.classList.remove( 'visible' );
		video.classList.add( 'visible' );
		clearTimeout(too2);
	}, 5500);
};

panel.addEventListener( 'transitionend', timeline, false );

Run Pen

This Pen is owned by Geoffrey Crofte on CodePen.

See more by @GeoffreyCrofte on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.