How to create a loading screen on WebCenter Portal

Prepare the template

1. Open the page template where you want to add a loading screen
2. Position yourself in an element that will be rendered for first (for example a panelGroupLayout or a panelStretchLayout
3. Inside this element, create a new panelGroupLayout. This will be the container of your content portal and the loading screen
4. Inside this new container, add two nested panelGroupLayout.
   
   • The panelGroup parent will have an id="pslload", a styleClass="loader" and an inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;".
   • The panelGroup child will have a styleClass="loaderSpinner" and an id="pglSpinner".
5.  Add to the container of your content portal this inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%;"

<af:panelGroupLayout id="containerLoad">

    <af:panelGroupLayout id="pslload" styleClass="loader"

        inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10;">

        <af:panelGroupLayout id="pglSpinner" styleClass="loaderSpinner"/>

    </af:panelGroupLayout>

    <af:panelStretchLayout id="pt_psl2" startWidth="300px"

        inlineStyle="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">

        <f:facet name="center">

            -- your content portal here --

        </f:facet>

    </af:panelStretchLayout>

</af:panelGroupLayout>

 Add the javascript

1. In your template, add this script in the top of your page

   <af: resource>

       function loadScreen() {

           const loader = document.querySelector(".loader");

       //console.log(loader);

       if(!loader){

           setTimeout(loadScreen, 500);

       return;

           }

       loader.classList.remove("af_panelGroupLayout");

       loader.classList.add("loader-hidden");

           loader.addEventListener("transitionend", () => {

           loader.remove();        

           });

       }

   
   

       window.onload = loadScreen();

   </af: resource>

Create the css classes

1. Open the skins section
2. Open the portal's skin you want to edit
3. Add these classes inside your sheet

.loader {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vw;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #f7f9fb;

    transition: opacity 0.75s, visibility 0.75s;

}

.loader-hidden {

    opacity: 0;

    visibility: hidden;

}

.loaderSpinner {

    content: "";

    position: fixed;

    top: calc(50vh - 38px);

    width: 75px;

    height: 75px;

    border: 15px solid #dddddd;

    border-top-color: #02254f;

    border-radius: 50%;

    animation: loading 0.75s ease infinite;

}

@keyframes loading {

    from {

        transform: rotate(0turn);

    }

    to {

        transform: rotate(1turn);

    }

}