{"id":6071,"date":"2024-04-14T13:35:27","date_gmt":"2024-04-14T05:35:27","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6071"},"modified":"2024-04-14T13:35:27","modified_gmt":"2024-04-14T05:35:27","slug":"establish-a-personalized-loader-in-webflow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-a-personalized-loader-in-webflow\/","title":{"rendered":"Establish a personalized loader in Webflow"},"content":{"rendered":"\n
\n

A loading indicator<\/strong> \u2014 or occasionally referred to as a loading screen \u2014 is the graphical element that greets you on certain websites prior to the primary content of the web page being fully loaded.<\/p>\n

Loading indicators can assume a variety of forms! They can range from straightforward designs to elaborate animations. Their primary objective is to engage site visitors while the actual content of the page is being loaded behind the scenes.<\/p>\n

There may exist differing opinions on the necessity of employing a loading indicator, nonetheless, given your presence on this page, we infer that you desire to grasp the process of crafting one in Webflow. In this instructional session, we will elucidate how to fabricate a loading indicator and two loading animations using interactions: one being the most elementary loader and the other an animated loader.<\/p>\n

Fabricating a loading indicator<\/h5>\n
    \n
  1. Designing the loading indicator<\/li>\n
  2. Formulating a loader<\/li>\n
  3. Establishing the initial state of the loading indicator<\/li>\n
  4. Concealing the loading indicator upon page completion<\/li>\n<\/ol>\n
    Prior to initiating<\/h5>\n

    In order to generate this loading indicator, you will need:<\/p>\n

      \n
    • Div blocks<\/li>\n
    • A text block<\/li>\n
    • Flexbox<\/li>\n
    • Fixed position<\/li>\n
    • Z-index<\/li>\n
    • Background styles<\/li>\n
    • Display settings<\/li>\n
    • Width and height dimensions<\/li>\n
    • Border radius<\/li>\n
    • Triggers and animations<\/li>\n<\/ul>\n

      If any of these components or properties are unfamiliar to you, we recommend perusing their guidelines and comprehending the usage of these tools before commencing with this tutorial.<\/p>\n

      Designing the loading indicator<\/h2>\n

      The loading indicator comprises the central loading container and a loader. To craft the primary container of the loading indicator:<\/p>\n

        \n
      1. Drag a div block<\/strong> from the add panel directly onto the page body. Assign a class and label it as “loading-indicator”.<\/li>\n
      2. Activate flexbox<\/strong>. Align<\/strong> and justify<\/strong> its children to the center.<\/li>\n
      3. Modulate the positioning \u2014 designate the position as fixed<\/strong>. Make sure to designate it as full<\/strong> in order to occupy the entire viewport. Establish the z-index to a notably high number such as 99999. This ensures it remains atop all other elements.<\/li>\n
      4. Assign a background color<\/li>\n<\/ol>\n

        Formulating a loader<\/h2>\n

        To fabricate the simplest loader, simply insert a text block<\/strong>. Double-click on it and input “loading…”. That concludes the fundamental design.<\/p>\n

        Insider tip<\/h5>\n

        Within your loading indicator container, you are at liberty to integrate various elements or assets \u2014 ranging from animated gifs to videos featuring animated loaders, or Lottie animations.<\/p>\n

        If you opt for gifs or videos, ensure they are not excessively large. It is imperative that the loading time of the preloader does not surpass that of your website. On the contrary, Lottie JSON animation files are compact in size and exceedingly versatile. Following their upload to Webflow, they are rendered as SVG animations. SVG files exhibit superior scalability compared to other formats without compromising quality, thereby rendering seamlessly across varied resolutions.<\/p>\n

        If you incorporate animated loaders (like gifs or videos), ensure they do not exceed an appropriate size. You do not want the loading time of the preloader to overshadow that of your site.<\/p><\/blockquote>\n

        <\/p>\n

        Formulating an animated loader – the bouncing ball<\/h3>\n

        It is also viable to devise animated loaders using Webflow Interactions. Illustrated below is how we conceived this bouncing ball loader.<\/p>\n

        \n
        <\/div>\n<\/figure>\n
          \n
        1. Construct a sphere using a div block<\/strong>. Define a width<\/strong> and height<\/strong> of 30x30px, fill in the background color<\/strong>, and apply a 50% radius<\/strong>.<\/li>\n
        2. Initiate a page load<\/strong> trigger within the interactions panel<\/strong>. Draft a novel animation for the commencement of page loading<\/strong>.<\/li>\n
        3. On the canvas, select the sphere and append a variety of animation actions<\/strong>. Here is how it has been configured:<\/li>\n<\/ol>\n
            \n
          • Action 1 \u2014 Propel the sphere upwards by specifying the y-axis, Y = -100<\/strong> \u2014 mark this as the initial state<\/strong><\/li>\n
          • Action 2 \u2014 Return the sphere to Y=0<\/strong> \u2014 duration<\/strong> 0.5 \u2014 easing<\/strong> = bounce<\/li>\n
          • Action 3 \u2014 Ascend the sphere back to Y = -100<\/strong> \u2014 duration<\/strong> 1 \u2014 easing<\/strong> = in out cubic<\/li>\n<\/ul>\n
            \n
            <\/div>\n<\/figure>\n
              \n
            1. Conclude the animation and configure it to loop<\/strong><\/li>\n<\/ol>\n

              Establishing the initial state of the loading indicator<\/h2>\n

              Subsequent to crafting the loading indicator, you are equipped to conceal it, enabling you to manage your other page elements sans the loading indicator obscuring everything. Thus, select the loading indicator<\/strong> and modify the display setting<\/strong> to none<\/strong>.<\/p>\n

              Crafting the interaction<\/h5>\n
                \n
              1. Ensure the loading indicator div block remains selected<\/li>\n
              2. Navigate to the interactions panel<\/strong> and introduce a page trigger: page load<\/strong>. Thereafter, commence a fresh animation upon completion of page loading<\/strong>.<\/li>\n
              3. Formulate a new timed animation<\/strong> at this juncture and assign it a title.<\/li>\n<\/ol>\n
                Establishing the initial state<\/h5>\n
                  \n
                1. Incorporate a new timed action of hide\/show<\/strong>. Subsequently, restore the display setting<\/strong> to flex<\/strong>. This renders it visible once more.<\/li>\n
                2. Designate this action as the initial state<\/strong>.<\/li>\n<\/ol>\n

                  Concealing the loading indicator once the page loads<\/h2>\n

                  The initial state determines the initial appearance when the page is first displayed. To ensure the disappearance of your loading indicator once the page completes loading:<\/p>\n

                    \n
                  1. Integrate a fresh timed action that sets the opacity to 0%<\/strong>. Adjust the duration if you desire a swifter animation.<\/li>\n
                  2. Designate the display setting as none<\/strong>. This conceals the loading indicator after it fades out (opacity reaches 0%).<\/li>\n<\/ol>\n
                    Insider tip<\/h5>\n
                    If you wish to guarantee the loading indicator remains visible for a specified duration (minimum), select the initial action (the opacity alteration) and delay it to activate post, for instance, half a second. This implies that even post page loading, it will persist for half a second before commencing to vanish.<\/h6>\n

                    That concludes the setup of a loading animation!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use Webflow Interactions to create a custom preloader and animated loaders.","protected":false},"author":2,"featured_media":6072,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6071","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6071"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6071\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6072"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}