body.pen_loading_spinner #page .pen_wrapper {
visibility: hidden; }
html.no-js body.pen_loading_spinner #page .pen_wrapper,
html.js body.pen_loading_spinner #page .pen_wrapper.pen_hidden {
animation-delay: 10s;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
animation-name: pen_fade_in;
}
html.js body.pen_loading_spinner #page .pen_wrapper.pen_hidden {
animation-delay: 30s;
}
@keyframes pen_fade_in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@media print, (prefers-reduced-motion: reduce) {
#page .pen_loading,
body.pen_loading_spinner #page .pen_wrapper {
animation-duration: 1ms;
}
}
#page .pen_loading {
animation-name: pen_fade_out;
animation-duration: 1s;
animation-fill-mode: both;
animation-iteration-count: 1;
background: rgba(0,0,0,0.85);
border: 0 none;
color: rgba(255,255,255,0.5);
cursor: default;
display: none;
font-size: 1.5em;
font-weight: normal;
height: 100%;
left: 0;
max-height: 100%;
max-width: 100%;
min-height: 100%;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 200000;
}
body.pen_loading_spinner #page .pen_loading {
display: block;
}
body.pen_drop_shadow #page .pen_loading {
text-shadow: 1px 1px 10px rgba(0,0,0,0.25);
}
html.no-js #page .pen_loading {
animation-delay: 10s;
speak: none;
}
html.js #page .pen_loading {
animation-delay: 30s;
}
@keyframes pen_fade_out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
#page .pen_loading .pen_icon,
#page .pen_loading .pen_text,
#page .pen_loading .pen_button.pen_stop {
position: absolute;
left: 50% !important;
top: 50% !important;
transform: translate(-50%,-50%);
}
#page .pen_loading .pen_icon {
height: 250px !important;
width: 250px !important;
}
#page .pen_loading .pen_button.pen_stop {
font-size: 0.75em;
opacity: 0.75;
padding: 0.5rem 2rem !important;
top: calc( 50% + 175px ) !important;
transition: opacity .3s;
width: auto !important;
}
#page .pen_loading .pen_button.pen_stop:focus,
#page .pen_loading .pen_button.pen_stop:hover,
#page .pen_loading .pen_button.pen_stop:active {
opacity: 1;
}
body:not(.pen_loading_spinner_style_none) #page .pen_loading .pen_icon:before {
animation: pen_loading 0.5s infinite linear;
background: transparent;
border-radius: 50% !important;
content: '';
height: 100% !important;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100% !important;
}
body.pen_loading_spinner_style_1 #page .pen_loading .pen_icon:before {
border-top: 10px solid rgba(255,255,255,0.1) !important;
border-right: 10px solid rgba(255,255,255,0.1) !important;
border-bottom: 10px solid rgba(255,255,255,0.1) !important;
border-left: 10px solid rgba(255,255,255,0.75) !important;
}
body.pen_loading_spinner_style_2 #page .pen_loading .pen_icon:before {
border-top: 10px solid rgba(255,255,255,0.1) !important;
border-right: 10px solid rgba(255,255,255,0.75) !important;
border-bottom: 10px solid rgba(255,255,255,0.1) !important;
border-left: 10px solid rgba(255,255,255,0.75) !important;
}
body.pen_loading_spinner_style_3 #page .pen_loading .pen_icon:before {
border-top: 1px solid rgba(255,255,255,0.1) !important;
border-right: 1px solid rgba(255,255,255,0.1) !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
border-left: 1px solid rgba(255,255,255,0.5) !important;
}
body.pen_loading_spinner_style_4 #page .pen_loading .pen_text {
font-weight: normal;
}
body.pen_loading_spinner_style_4 #page .pen_loading .pen_icon:before {
border-top: 1px solid rgba(255,255,255,0.25) !important;
border-right: 1px solid rgba(255,255,255,0.25) !important;
border-bottom: 1px solid rgba(255,255,255,0.25) !important;
border-left: 1px solid rgba(255,255,255,0.75) !important;
}
@keyframes pen_loading {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}