html {
width: 100%;
}
body {
overflow-x: hidden !important;
}
/* Hide everything under body tag */
body.show-spinner > *{
opacity: 0;
}
.c-overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 8; /* Specify a stack order in case you're using a different order for other elements */
}
.c-overlay-text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
.badge-count{
font-size: 9px;
color: #145388;
border: 1px solid #145388;
border-radius: 10px;
position: absolute;
width: 18px;
height: 15px;
text-align: center;
font-weight: 700;
top: 2px;
right: 2px;
line-height: 14px;
}
/* Spinner */
body.show-spinner::before{
content: " ";
display: inline-block;
width: 30px;
height: 30px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 50%;
border-top-color: rgba(0, 0, 0, 0.3);
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
left: calc(50% - 15px);
top: calc(50% - 15px);
position: fixed;
z-index: 1;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
|