You need to sign in to do that
Don't have an account?
Amrut
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
thanks
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
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;
}