/*--------------------------------------------------------------
# Page Transition Layer
--------------------------------------------------------------*/
body > .page-transition-layer{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999999;
content:" ";
width:auto;
height:auto;
opacity:0;
visibility:hidden;
transition:all 0.7s ease-in-out;
-webkit-transition:all 0.7s ease-in-out;
}
.page-transition-layer.i-am-active,
body.page-transition-active > .page-transition-layer{
opacity:1;
visibility:visible;
}
.page-transition-layer-loader{
position:relative;
width:100%;
height:5px;
overflow:hidden;
background-color:#f8f8f8;
}
.page-transition-layer-spinner{
position:absolute;
top:calc(50% - 33px);
right:0;
left:0;
animation:PageTransitionSpinner 1.4s linear infinite;
}
@keyframes PageTransitionSpinner{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(270deg);
}
}
.page-transition-layer-spinner .page-transition-layer-spinner-path{
stroke-dasharray:187;
stroke-dashoffset:0;
transform-origin:center;
stroke:#4285F4;
animation:PageTransitionSpinnerCircle 1.4s ease-in-out infinite;
}
@keyframes PageTransitionSpinnerCircle{
0% {
stroke-dashoffset:187;
}
50% {
stroke-dashoffset:46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset:187;
transform:rotate(450deg);
}
}