Introduction: In this blog, we will understand how to create a loader in PowerApps Portal.
Steps to be followed:
- Create a div for loader.
- Add below HTML in the page where you want to display the loader.
<div id="loader"></div>

- Click on Browse website

- Click on Edit

- Click on Options

- Add the below CSS in Custom CSS and click on Save.
#loader {
position:fixed;
width:100%;
left:0;right:0;top:0;bottom:0;
background-color: rgba(255,255,255,0.8);
z-index:9999;
display:none;
}
@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#loader::after {
content:'';
display:block;
position:absolute;
left:48%;top:40%;
width:100px;height:100px;
border-style:solid;
border-color:#3498db;
border-top-color:transparent;
border-width: 7px;
border-radius:50%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

- You will be able to see the loader on the webpage.

Now we have to write the logic to show and hide this loader.
- To Show loader
$('#loader').show();
- To Hide loader
$('#loader').hide();
Example:

Result: