Adds loading spinner to main tag while jQuery(document).ready is not done.
This commit is contained in:
parent
4c13f19af6
commit
43967ffa1e
|
@ -1,4 +1,7 @@
|
|||
jQuery( document ).ready(function( $ ) {
|
||||
|
||||
$( 'body' ).removeClass('loading-content');
|
||||
|
||||
$( '#carouselExample' ).on( 'slide.bs.carousel', function ( e ) {
|
||||
|
||||
var $e = $( e.relatedTarget );
|
||||
|
|
|
@ -23,6 +23,45 @@ body{
|
|||
}
|
||||
}
|
||||
|
||||
body.loading-content main {
|
||||
min-height: calc(100vh - 480px);
|
||||
width: 100vw;
|
||||
transition: min-height ease 0.3s, height ease 0.3s;
|
||||
}
|
||||
|
||||
body.loading-content main>* {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes spinner-border {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
body.loading-content main:before {
|
||||
content: ' ';
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 4rem 50% 0 50%;
|
||||
vertical-align: center;
|
||||
border: 0.25rem solid #dbdbdb;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: spinner-border .5s linear infinite;
|
||||
animation: spinner-border .5s linear infinite;
|
||||
}
|
||||
|
||||
// Animation for return to top
|
||||
@keyframes appear-from-bottom {
|
||||
from {
|
||||
|
|
|
@ -104,6 +104,21 @@ if ( ! isset( $content_width ) ) {
|
|||
$content_width = 1400;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds extra classes dp body tag. has-not-finished-loading is removed
|
||||
* from tag after jQuery.document(ready). It is used to style page while
|
||||
* not all DOM and JS is finished.
|
||||
*
|
||||
* @since Tainacan Theme
|
||||
*/
|
||||
add_filter( 'body_class', 'custom_class' );
|
||||
function custom_class( $classes ) {
|
||||
|
||||
$classes[] = 'loading-content';
|
||||
|
||||
return $classes;
|
||||
}
|
||||
|
||||
/*
|
||||
* Register Widgets SideBar
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue