function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AmrutAmrut 

How to change loading (three dot symbol and spinner) symbol in lightning communities template.

How to change loading (three dot symbol and spinner) symbol in lightning communities template. By default salesforce has provided those loaders, how can we customize them?

thanks
 
SandhyaSandhya (Salesforce Developers) 
Hi,

You may build custom loading spinners, refer below blog that can help you to start.

https://developer.salesforce.com/blogs/developer-relations/2015/06/svg.html

Please mark it as solved if my reply was helpful. It will make it available for other as the proper solution.
                                             
Best Regards
Sandhya
 
 
AmrutAmrut
How can i replace the existing standard loading symbol in the COMMUNITIES ?? thanks - amrut
Wameng TangWameng Tang
Hi there, were you able to find the solution? I'm having the same requiment as well.
SFDC AppsdevSFDC Appsdev
Hi Guys
if you are still looking for this here is the code
copy these css in the Community Override CSS
.siteforceLoadingBalls .loadingBall.third {
    display:none;
}

.siteforceLoadingBalls.global {
    margin-left: 0 !important;
    margin-top: 0 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(90deg);
    padding:0px
}
.siteforceSpinnerManager .mask {
    margin:0 !important;
    position:fixed !important;
    opacity:1;
    transition: opacity .2s ease,visibility 0s;
    transition-delay: 0s,.3s;
    background-color: hsla(0,0%,100%,.75);
}
.siteforceSpinnerManager .loadingCon{
    width: 2rem;
}
.loadingBall.first, .loadingBall.second {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.siteforceLoadingBalls .loadingBall{
    animation:none;
    height: 0rem
}
.siteforceLoadingBalls.global, .loadingBall.first, .loadingBall.second {
    transform-origin: 50% 50%;
    will-change: transform;
}

.siteforceLoadingBalls.global:after, .siteforceLoadingBalls.global:before, .loadingBall.first:after, .loadingBall.first:before, .loadingBall.second:after, .loadingBall.second:before {
    content: "";
    position: absolute;
    background: #b0adab;
    border-radius: 50%;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    transform: translateZ(0);
    background-color: #004EA8;
}
.loadingBall.first {
    transform: rotate(60deg);
}
.loadingBall.second {
    transform: rotate(120deg);
}
.siteforceLoadingBalls.global:before, .siteforceLoadingBalls .first:before, .siteforceLoadingBalls .second:before, .siteforceLoadingBalls.global:before, .siteforceLoadingBalls .first:before, .siteforceLoadingBalls .second:before {
    animation-name: dotsBounceBefore-medium;
    top: -.25rem;
    left: -.25rem;
}
.loadingBall.first:before {
    animation-delay: 83.33333ms;
    animation-name: dotsBounceBefore-medium;
    top: -.25rem;
    left: -.25rem;
    width: .5rem;
    height: .5rem;
}
.loadingBall.first:after {
    animation-delay: 583.33333ms;
    animation-name: dotsBounceAfter-medium;
    top: -.25rem;
    right: -.25rem;
    width: .5rem;
    height: .5rem;
}
.loadingBall.second:before {
    animation-delay: .25s;
    animation-name: dotsBounceBefore-medium;
    top: -.25rem;
    left: -.25rem;
    width: .5rem;
    height: .5rem;
}
.loadingBall.second:after {
    animation-delay: .75s;
    animation-name: dotsBounceAfter-medium;
    top: -.25rem;
    right: -.25rem;
    width: .5rem;
    height: .5rem;
}
.siteforceLoadingBalls.global:before {
    animation-delay: -83.33333ms;
    animation-name: dotsBounceBefore-medium;
    top: -.25rem;
    left: -.25rem;
    width: .5rem;
    height: .5rem;
}
.siteforceLoadingBalls.global:after {
    animation-delay:.41666667s;
    animation-name: dotsBounceAfter-medium;
    top: -.25rem;
    right: -.25rem;
    width: .5rem;
    height: .5rem;
}