Overriding loading indicator in Valo theme

I am using valo as my base theme and having my own rules on top of it. I am trying to change the position of loading indicator (from top right to center) like below

.v-loading-indicator,
.v-loading-indicator-delay,
.v-loading-indicator-wait {
position: absolute !important;
top: 52%;
right: 51%;
z-index: 30000;
width: 25px;
height: 25px;
margin: 0;
background-position: 50%;
background: #fff url(…/valo/shared/img/spinner.gif) no-repeat 50%;
background-color: black;
opacity: .8;
-ms-filter: alpha(opacity=80);
filter: alpha(opacity=80);
}
While compiling the theme i could see corresponding code in .css file. But again default properties of valo theme are also getting generated in .css file . Meaning two different set of rules for v-loading-indicator .This produces an undesired out put. For example two set of rules are getting produced in css like below

.mytheme .v-loading-indicator {
position: absolute !important;
top: 52%;
right: 51%;
z-index: 30000;
width: 25px;
height: 25px;
margin: 0;
background-position: 50%;
background: #fff url(…/valo/shared/img/spinner.gif) no-repeat 50%;
background-color: black;
opacity: 0.8;
-ms-filter: alpha(opacity=80);
filter: alpha(opacity=80);
}
and default rules

.mytheme .v-loading-indicator {
position: fixed !important;
z-index: 99999;
left: 0;
right: auto;
top: 0;
width: 50%;
opacity: 1;
height: 4px;
background-color: #197de1;
pointer-events: none;
-webkit-transition: none;
-moz-transition: none;
transition: none;
-webkit-animation: v-progress-start 1000ms 200ms both;
-moz-animation: v-progress-start 1000ms 200ms both;
animation: v-progress-start 1000ms 200ms both;
}

How to avoid generating the default rules while overring loding-indicator?

Thanks
Barath

Hey Barath,

Are you unable to get the right results, or just worried about the CSS output? If you’re using Valo, its styles will be included.

You can “remove” component styles, but that doesn’t really apply here (loading indicator is not considered a component AFAIK):
https://vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.optimization
.