@keyframes tripp-xt-posts-loading-placeholder {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
:root {
--tripp-xt-loading-placholder-background: linear-gradient(to right, rgba(0, 0, 0, 0.05) 8%, rgba(0, 0, 0, 0.15) 38%, rgba(0, 0, 0, 0.05) 54%);
}
.main-posts.is-loading .posts-list .entry {
pointer-events: none;
position: relative;
}
.main-posts.is-loading .posts-list .entry::after {
animation: tripp-xt-posts-loading-placeholder 1.25s linear forwards infinite;
background: rgb(var(--tripp-color-surface-rgb)) var(--tripp-xt-loading-placholder-background);
background-size: 200% 100%;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 99;
} .post-pagination.navigation.loadmore-pagination a::after,
.comments-section .navigation.loadmore-pagination a::after {
display: none;
}
.post-pagination.navigation.loadmore-pagination .nav-links,
.comments-section .navigation.loadmore-pagination .nav-links {
height: 8rem;
}
.navigation.loadmore-pagination.is-loading a {
display: none;
}
.navigation.loadmore-pagination.is-loading .post-loader {
display: block;
} .comments-section .navigation.loadmore-pagination .nav-links > div {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
}
.comments-section .navigation.loadmore-pagination.is-loading .nav-links > div::before {
animation: tripp-xt-spin 1s infinite linear;
border: 2px solid #a0a0a0;
border-radius: 50%;
border-top-color: #d4d4d4;
content: "";
display: inline-block;
height: 3.5rem;
outline: 1px solid transparent;
position: relative;
width: 3.5rem;
vertical-align: middle;
}