<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pBun/pen/sHCzt?depth=everything&order=popularity&page=16&q=translate&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">body {
height: 100%;
overflow: hidden;
background: #000;
}
.loading-panel {
width: 50%;
height: 100%;
position: absolute;
top: 0px;
overflow: hidden;
}
.first.loading-panel {
left: 0;
background: #D2E3AB;
animation: slide-in-left 10s ease-out infinite;
}
.second.loading-panel {
right: 0;
background: #2A7689;
animation: slide-in-right 10s ease-out infinite;
}
/* Icons */
.icon-wrapper {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100%;
background: rgba(255, 255, 255, 0.3);
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
}
.first.loading-panel .icon-wrapper {
animation: fade 10s linear infinite, slide-in-bottom 10s ease-out infinite;
}
.second.loading-panel .icon-wrapper {
animation: fade 10s linear infinite, slide-in-top 10s ease-out infinite;
}
.icon-wrapper:before {
content: ' ';
width: 34%;
height: 34%;
background: rgba(255, 255, 255, 0.3);
border-radius: 100%;
position: absolute;
}
.first.loading-panel .icon-wrapper:before {
top: -5%;
left: -5%;
animation: late-fade 10s linear infinite, circulate-clockwise 1s linear infinite;
}
.second.loading-panel .icon-wrapper:before {
bottom: -5%;
right: -5%;
animation: late-fade 10s linear infinite, circulate-counterclockwise 1s linear infinite;
}
.icon-wrapper {
position: relative;
text-align: center;
}
.first.loading-panel .cloud {
fill: #335367;
}
.second.loading-panel .cloud {
fill: #fff;
}
.icon-wrapper .icon {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
margin-top: -10px;
}
.first.loading-panel .icon {
animation: spin-clockwise 2s ease-out infinite;
}
.second.loading-panel .icon {
overflow: hidden;
animation: blind-right 1.42857s ease-out infinite;
left: 50%;
margin-left: -17px;
}
/* Animations */
@keyframes slide-in-left {
0% {
transform: translate(-100%);
}
10% {
transform: translate(0);
}
80% {
transform: translate(0);
}
90% {
transform: translate(-100%);
}
100% {
transform: translate(-100%);
}
}
@keyframes slide-in-right {
0% {
transform: translate(100%);
}
10% {
transform: translate(0);
}
80% {
transform: translate(0);
}
90% {
transform: translate(100%);
}
100% {
transform: translate(100%);
}
}
@keyframes slide-in-bottom {
0% {
top: 120%;
}
10% {
top: 120%;
}
15% {
top: 50%;
}
75% {
top: 50%;
}
80% {
top: 120%;
}
100% {
top: 120%;
}
}
@keyframes slide-in-top {
0% {
top: -20%;
}
10% {
top: -20%;
}
15% {
top: 50%;
}
75% {
top: 50%;
}
80% {
top: -20%;
}
100% {
top: -20%;
}
}
@keyframes fade {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
15% {
opacity: 1;
}
75% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes late-fade {
0% {
opacity: 0;
}
15% {
opacity: 0;
}
20% {
opacity: 1;
}
70% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes circulate-clockwise {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(10%, 10%);
}
50% {
transform: translate(0%, 20%);
}
75% {
transform: translate(-10%, 10%);
}
}
@keyframes circulate-counterclockwise {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(-10%, 10%);
}
50% {
transform: translate(0%, 20%);
}
75% {
transform: translate(10%, 10%);
}
}
@keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes blind-right {
0% {
width: 0;
opacity: 0;
}
1% {
width: 0;
opacity: 1;
}
50% {
width: 35px;
opacity: 1;
}
99% {
width: 35px;
opacity: 0;
}
100% {
width: 0;
opacity: 0;
}
}
</style></head><body>
<div class="loading-panel first">
<div class="icon-wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="125px" height="100%" viewBox="0 0 33.271 22.313" enable-background="new 0 0 33.271 22.313" xml:space="preserve">
<path class='cloud' d="M27.244,8.64c0.04-0.319,0.068-0.643,0.068-0.973C27.312,3.432,23.88,0,19.646,0
c-3.069,0-6.047,2.208-7.047,5.208c-1.625-0.922-3.341-1.195-4.595-0.104c-0.012,0.01-0.019,0.022-0.031,0.033
c-0.02,0.014-0.042,0.02-0.062,0.034c-1.236,0.875-1.686,2.49-1.336,4.123C6.543,9.292,6.51,9.292,6.51,9.292
c-3.596,0-6.51,2.914-6.51,6.51c0,3.596,2.914,6.511,6.51,6.511h19.896c3.791,0,6.864-3.073,6.864-6.864
C33.271,11.941,30.639,9.054,27.244,8.64z"/>
</svg>
<div class="icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="35px" viewBox="0 0 9.652 9.207" enable-background="new 0 0 9.652 9.207" xml:space="preserve">
<path fill="#D0E2AA" d="M1.898,4.375c0.117-0.545,0.388-1.03,0.773-1.419l0.862,0.91c0.03,0.032,0.069,0.052,0.11,0.061
c0.033,0.007,0.067,0.006,0.1-0.002c0.075-0.02,0.132-0.08,0.146-0.154l0.666-3.526C4.567,0.18,4.548,0.113,4.502,0.066
C4.457,0.018,4.39-0.007,4.323,0.001L0.578,0.312C0.5,0.321,0.435,0.373,0.409,0.444c-0.027,0.071-0.01,0.151,0.044,0.208
l0.958,0.981c-0.658,0.638-1.116,1.449-1.31,2.358C-0.217,5.479,0.224,7.043,1.28,8.178c0.135,0.145,0.307,0.237,0.488,0.276
c0.279,0.06,0.582-0.008,0.808-0.208C2.949,7.917,2.519,7.641,2.32,7.269C1.87,6.422,1.7,5.302,1.898,4.375z"/>
<path fill="#D0E2AA" d="M7.754,4.831C7.638,5.376,7.367,5.861,6.981,6.25L6.119,5.34C6.09,5.309,6.051,5.289,6.009,5.28
c-0.033-0.007-0.067-0.007-0.1,0.002c-0.075,0.02-0.132,0.08-0.146,0.154L5.097,8.961C5.084,9.027,5.104,9.092,5.15,9.14
c0.044,0.048,0.112,0.072,0.178,0.064l3.745-0.311c0.077-0.009,0.144-0.06,0.17-0.132c0.026-0.07,0.008-0.151-0.045-0.207
L8.24,7.573C8.898,6.936,9.356,6.125,9.55,5.215c0.318-1.487-0.123-3.053-1.178-4.188C8.237,0.884,8.065,0.791,7.884,0.752
C7.605,0.692,7.302,0.76,7.076,0.959c-0.373,0.33,0.059,0.605,0.257,0.979C7.783,2.784,7.953,3.904,7.754,4.831z"/>
</svg>
</div>
</div>
</div>
<div class="loading-panel second">
<div class="icon-wrapper">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="125px" height="100%" viewBox="0 0 33.271 22.313" enable-background="new 0 0 33.271 22.313" xml:space="preserve">
<path class='cloud' d="M27.244,8.64c0.04-0.319,0.068-0.643,0.068-0.973C27.312,3.432,23.88,0,19.646,0
c-3.069,0-6.047,2.208-7.047,5.208c-1.625-0.922-3.341-1.195-4.595-0.104c-0.012,0.01-0.019,0.022-0.031,0.033
c-0.02,0.014-0.042,0.02-0.062,0.034c-1.236,0.875-1.686,2.49-1.336,4.123C6.543,9.292,6.51,9.292,6.51,9.292
c-3.596,0-6.51,2.914-6.51,6.51c0,3.596,2.914,6.511,6.51,6.511h19.896c3.791,0,6.864-3.073,6.864-6.864
C33.271,11.941,30.639,9.054,27.244,8.64z"/>
</svg>
<div class="icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="35px" viewBox="0 0 10.775 9.117" enable-background="new 0 0 10.775 9.117" xml:space="preserve">
<path fill="#2A7689" d="M9.133,0L8.899,0.224C8.731,0.392,8.563,0.562,8.4,0.735C7.791,1.377,7.177,2.091,6.526,2.916
C5.96,3.634,5.38,4.419,4.805,5.249C4.653,5.466,4.507,5.68,4.358,5.898L4.329,5.9C4.298,5.943,4.255,5.974,4.198,5.974
c-0.051,0-0.094-0.023-0.125-0.059L4.058,5.917C3.261,4.906,2.045,3.646,2.045,3.646L0,3.615C2.631,7.569,2.596,7.57,3.365,9.117
h1.716C5.144,8.991,5.235,8.805,5.265,8.74l0.149-0.317l0.31-0.632c0.21-0.42,0.426-0.843,0.646-1.257
c0.469-0.883,0.92-1.679,1.379-2.435C8.27,3.239,8.762,2.495,9.255,1.82c0.132-0.179,0.268-0.357,0.402-0.531l0.205-0.261
l0.203-0.245c0.054-0.068,0.109-0.128,0.162-0.19l0.052-0.059c0.071-0.083,0.143-0.166,0.215-0.24
C10.587,0.192,10.682,0.095,10.775,0H9.133z"/>
</svg>
</div>
</div>
</div>
</body></html>
