Spinner in Visualforce Page without Controller | #Salesforce Tutorials | #Salesforce Beginner

Kapil May 26, 2020
Salesforce Bolt


Hello guys,
In this article I will write a very basic css code to display spinner in Visualforce page on button's click without using any controller.

Add below style in your Visualforce page : 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
            .spinnerBg{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #000;
            opacity: 0.1;
            z-index: 999999;
            }
            .spinner{
            width: 100%;
            height: 100%;
            position: absolute;
            background-image: url("/img/loading32.gif");
            background-size: 56px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            z-index: 9999999;
            opacity: 1;
            }
</style>


After the style add below code in VF page
1
2
3
4
5
6
7
8
<apex:actionStatus id="spinnerStatus">
            <apex:facet name="start">
                <div class="spinnerBg" />
                <div class="spinner" />
            </apex:facet>
</apex:actionStatus>

<apex:commandButton value="Save" status="spinnerStatus" action="{!save}" />


Tags:

Post a Comment

0 Comments