Holdex pre-loader animation

holdex-preloader.html

<div class="preloader">
	<div class="right-tnx">
		<div class="flip">
		  <div class="tnx">
		    <div class="el"></div>
		    <div> 
		      <div class="el"></div>
		    </div>
		  </div>
		</div>		
	</div>
	<div class="tnx left-tnx">
	  <div class="el"></div>
	  <div>
	    <div class="el"></div>
	  </div>
	</div>
</div>

<style type="text/css">

	.preloader {
	  margin: -23px auto;
	  width: 130px;
	  position: relative;
	  top: 50%;
      transform: translate(0, -50%);
	}
	
	.el {
	  background: #3CB2FF;
	  border-radius: 5px;
	  transform: skewX(30deg);
	  position: absolute;
	  width: 62px;
	  height: 49px;
	  border-radius: 14px 3px 6px 0px;
	}

	.tnx > .el{
	  box-shadow: white 5px -3px 0px 3px;
	}

	.el+div {
	  background:green;
	  transform: rotateX(-180deg);
	  top: 93px;
	  position: absolute;
	}

	.flip {
	  position: absolute;
	  transform: rotateZ(-180deg);
	  top: 45px;
	  left: 105px;
	}

	.flip .el {
	  background: #0076FF;
	}

	@keyframes left-tnx {
  		0%   { transform: translateX(-100px); opacity: 0;}
  		20%   { transform: translateX(-100px); opacity: 0;}
  		60%   { transform: translateX(0px); opacity: 1;}
  		95%   { transform: translateX(0px); opacity: 1;}
  		100% { transform: translateX(0px); opacity: 0;}
	}

	@keyframes right-tnx {
  		0%   { transform: translateX(100px); opacity: 0;}
  		10%   { transform: translateX(100px); opacity: 0;}
  		60%   { transform: translateX(0px); opacity: 1;}
  		85%   { transform: translateX(0px); opacity: 1;}
  		90% { transform: translateX(0px); opacity: 0;}
  		100% { transform: translateX(0px); opacity: 0;}
	}

	.left-tnx {
		animation: left-tnx 4s infinite ease-out;
	}	

	.right-tnx {
		animation: right-tnx 4s infinite ease-out;
		z-index: -100;
	}

</style>

Minimise it through before use. Minimisation can be done here: https://www.willpeavy.com/tools/minifier/