Loading Effect Preview
Different predefined Loading effect styles for you to choose from. Select one of them or add your own unique style to your gallery.
.select-option {
text-align: right;
}
.select-option select {
border-radius: 5px;
padding: 10px;
text-align: right;
}
.wrap-kol [class^='imghvr-'], .wrap-kol [class*=' imghvr-'] {
border-radius: 10px;
box-shadow: 0 20px 15px -10px rgb(0 0 0/0.3);
}
.wrap-kol [class^=imghvr-] figcaption, .wrap-kol [class*=' imghvr-'] figcaption, [class^=imghvr-reveal-]:before, [class*=' imghvr-reveal-']:before,.wrap-kol [class^='imghvr-border-'] {
background-color: #4242ce;
}
[class^=imghvr-strip-shutter]:before, [class^=imghvr-strip-shutter]:after, [class^=imghvr-strip-shutter] figcaption:before, [class^=imghvr-strip-shutter] figcaption:after, [class*=' imghvr-strip-shutter']:before, [class*=' imghvr-strip-shutter']:after, [class*=' imghvr-strip-shutter'] figcaption:before, [class*=' imghvr-strip-shutter'] figcaption:after, [class^=imghvr-pixel]:before, [class^=imghvr-pixel]:after, [class^=imghvr-pixel] figcaption:before, [class^=imghvr-pixel] figcaption:after, [class*=' imghvr-pixel']:before, [class*=' imghvr-pixel']:after, [class*=' imghvr-pixel'] figcaption:before, [class*=' imghvr-pixel'] figcaption:after, *[class^=imghvr-book-open-]:hover figcaption:before, *[class^=imghvr-book-open-]:hover figcaption:after, *[class*=' imghvr-book-open-']:hover figcaption:before, *[class*=' imghvr-book-open-']:hover figcaption:after, [class^=imghvr-blocks]:before, [class^=imghvr-blocks]:after, [class^=imghvr-blocks] figcaption:before, [class^=imghvr-blocks] figcaption:after, [class*=' imghvr-blocks']:before, [class*=' imghvr-blocks']:after, [class*=' imghvr-blocks'] figcaption:before, [class*=' imghvr-blocks'] figcaption:after, [class^=imghvr-blinds]:before, [class^=imghvr-blinds]:after, [class^=imghvr-blinds] figcaption:before, [class^=imghvr-blinds] figcaption:after, [class*=' imghvr-blinds']:before, [class*=' imghvr-blinds']:after, [class*=' imghvr-blinds'] figcaption:before, [class*=' imghvr-blinds'] figcaption:after,[class^=imghvr-strip-horiz]:before, [class^=imghvr-strip-horiz]:after, [class^=imghvr-strip-horiz] figcaption:before, [class^=imghvr-strip-horiz] figcaption:after, [class*=' imghvr-strip-horiz']:before, [class*=' imghvr-strip-horiz']:after, [class*=' imghvr-strip-horiz'] figcaption:before, [class*=' imghvr-strip-horiz'] figcaption:after {
background-color: #4242ce;
}
.wrap-kol [class^=imghvr-strip-] figcaption, .wrap-kol [class^=imghvr-pixel-] figcaption, [class*=' imghvr-pixel'] figcaption, .wrap-kol [class^=imghvr-border-] figcaption, *[class^=imghvr-book-open-] figcaption, *[class*=' imghvr-book-open-'] figcaption, [class^=imghvr-blocks] figcaption, [class*=' imghvr-blocks'] figcaption, [class^=imghvr-blinds] figcaption, [class*=' imghvr-blinds'] figcaption {
background-color: transparent !important;
}
.image-effect {
position: relative;
display: inline-block;
opacity: 0.3;
margin-right: 15px;
margin-bottom: 15px;
}
.image-effect.active {
opacity: 1;
}
.image-effect:hover {
cursor: pointer;
}
.effect-title {
text-align: center;
font-size: 14px;
color: #333333;
}
.image-effect.active .effect-title {
font-weight: bold;
}
.row-fx {
margin-bottom: 20px;
}
.img-sprite {
background-repeat: no-repeat !important;
height: 95px;
width: 87px;
margin: auto;
margin-bottom: 10px;
}
#zoom {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 0;
}
#throw {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px 0;
}
#strip {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px 0;
}
#stack {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px 0;
}
#slide {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -367px 0;
}
#shutterout {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -459px 0;
}
#shutterin {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -552px 0;
}
#shift {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -644px 0;
}
/* second row fx */
#reveal {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 -100px;
}
#push {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px -100px;
}
#pixel {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px -100px;
}
#pivot {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px -100px;
}
#lightspeed {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -368px -100px;
}
#imagezoom {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -460px -100px;
}
#hinge {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -552px -100px;
}
#gradient {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -644px -100px;
}
/* third row fx */
#fold {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 -200px;
}
#flip {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px -200px;
}
#fallaway {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px -200px;
}
#fade {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px -200px;
}
#dive {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -367px -200px;
}
#cube {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -460px -200px;
}
#circle {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -552px -200px;
}
#bounce {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -644px -200px;
}
/* fourth row fx */
#borderreveal {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) 0 -300px;
}
#bookopen {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -92px -300px;
}
#blur {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -184px -300px;
}
#block {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -276px -300px;
}
#blinds {
background: url(https://team.themesawesome.com/wp-content/uploads/sites/135/2020/10/fx_sprites.png) -367px -300px;
}
.ta-color-pick {
border: 1px solid #ddd;
padding: 8px 10px;
background-color: transparent !important;
}
.ta-color-pick span.text {
display: inline-flex;
vertical-align: middle;
font-size: 14px;
margin-left: 5px;
}
.ta-color-pick .sp-dd {
display: none;
}
@media (max-width: 640px) {
.select-option {
text-align: center;
}
.select-option select {
max-width: 80%;
margin-bottom: 10px;
}
.wrap-kol .col-span-9 {
grid-column: span 12/span 12;
margin-left: 50px;
}
.effect-title {
font-size: 13px;
}
.sisa-kolom {
grid-column: span 12/span 12;
padding: 0 20px;
}
}
@media (max-width: 480px) {
.select-option {
text-align: left !important;
}
.wrap-kol .col-span-9 {
margin-left: 20px;
}
}
Select Loading Effect
Style 1
Style 2
Style 3
Style 4
Style 5
Style 6
Style 7
Style 8
Style 9
Style 10
Style 11
Style 12
Style 13
Style 14
Style 15
(function($) {
'use strict';
$('.blog-post-21 .grid-template').addClass('grid--loading');
var body = document.querySelectorAll('.blog-post-21 .grid-template'),
grids = [].slice.call(document.querySelectorAll('.blog-post-21 .grid-template')), masonry = [],
currentGrid = 0,
// The GridLoaderFx instances.
loaders = [],
loadingTimeout = setTimeout (500);
function init() {
// Preload images
imagesLoaded('.blog-post-21 .grid-template', function() {
// Initialize Masonry on each grid.
var m = new Masonry('.blog-post-21 .grid-template', {
transitionDuration: '0.65s',
initLayout: true,
columnWidth: '.blog-post-item',
itemSelector: '.blog-post-item',
stagger: 0,
layoutMode: 'fitRows',
});
loaders.push(new GridLoaderFx(grids[currentGrid]));
loaders[currentGrid]._render("Hapi");
// Show current grid.
grids[currentGrid].classList.remove('grid--loading');
initEvents();
});
}
$(window).on('load', function () {
init();
})
function initEvents() {
// Switching grids radio buttons.
// Effect selection.
fxCtrls.forEach(function(ctrl) {
ctrl.addEventListener('click', applyFx);
});
}
function applyFx(ev) {
// Simulate loading grid to show the effect.
console.log(ev.target.getAttribute('data-fx'));
clearTimeout(loadingTimeout);
grids[currentGrid].classList.add('grid--loading');
loadingTimeout = setTimeout(function() {
grids[currentGrid].classList.remove('grid--loading');
// Apply effect.
loaders[currentGrid]._render(ev.target.getAttribute('data-fx'));
}, 500);
}
$('.change-load').on('change', function() {
var ahay = $(this).val();
clearTimeout(loadingTimeout);
grids[currentGrid].classList.add('grid--loading');
loadingTimeout = setTimeout(function() {
grids[currentGrid].classList.remove('grid--loading');
// Apply effect.
loaders[currentGrid]._render(ahay);
}, 500);
})
})( jQuery );