Site preloader options

Style the preloader for your site and to be displayed on your site while the content is loading

Site preloader options

Here you can style the preloader for the whole site. It appears while the content is loading and prevents the visitors from seeing the content restructures while all the images and text are completely loaded.

site-preloader-options

  • Site Preloader – this option allows you to enable or disable the preloader for the site. It is displayed while the content is fully loaded. The preloader can be also either enabled or disabled for a single page, post, portfolio item etc in back-end editor Preloader options meta box.
  • Preloader percentage – allows you to enable or disable preloader percentage counter.
    • Preloader Counter Typography – customize the typography settings for the preloader counter for the whole site.
  • Preloader background – allows you to style the background for the preloader on your site:
    • Preloader image – upload the image for the site preloader.
    • Background color – pick up the site preloader background color to be displayed as a background for the preloader.
    • Background position – select the position for the image for its better displaying.
    • Background size – allows adjusting the background image displaying. You can select: cover, contain and initial values or inherit the value set Theme options General options Site preloader option section.
    • Background repeat – select whether the site preloader background image will be repeated or not repeated. You can select horizontal repeat, vertical repeat or disable repeat of the image.
    • Background attachment – sets the background image attachment style:
      • Scroll – background image scrolls with the content.
      • Fixed – the background image is fixed and content scrolls over it.
      • Initial – the background image and content will be fixed.
  • Preloader style – select the preloader style for your site.
    • None – no style is selected for site preloader.
    • СSS Animation – adds animated element to the preloader.
      • Animation style – select the animation elements site for the preloader.
      • Animation base color – set the color of the animated element.
    • Image – set the image that will be displayed on the preloader (*.gif images can be used as well).
      • Preloader image – upload the image for the site preloader.
    • Progress bar – adds the horizontal progress bar to the preloader.
      • Preloader bar background color – select the color for your preloader bar to be displayed on the page.
      • Preloader bar position – allows you to select the preloader bar position. Top, middle and bottom positions are available.
      • Preloader bar height in px – set the height of the progress bar.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}