diff --git a/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js b/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js
index 9a7177037..aae53c2ab 100644
--- a/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js
+++ b/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js
@@ -1,6 +1,19 @@
 import BaseStyle from '@primevue/core/base/style';
 
 const theme = ({ dt }) => `
+.p-virtualscroller-loader {
+    background: ${dt('virtualscroller.loader.mask.background')};
+    color: ${dt('virtualscroller.loader.mask.color')};
+}
+
+.p-virtualscroller-loading-icon {
+    font-size: ${dt('virtualscroller.loader.icon.size')};
+    width: ${dt('virtualscroller.loader.icon.size')};
+    height: ${dt('virtualscroller.loader.icon.size')};
+}
+`;
+
+const css = `
 .p-virtualscroller {
     position: relative;
     overflow: auto;
@@ -35,8 +48,6 @@ const theme = ({ dt }) => `
     left: 0;
     width: 100%;
     height: 100%;
-    background: ${dt('virtualscroller.loader.mask.background')};
-    color: ${dt('virtualscroller.loader.mask.color')};
 }
 
 .p-virtualscroller-loader-mask {
@@ -45,12 +56,6 @@ const theme = ({ dt }) => `
     justify-content: center;
 }
 
-.p-virtualscroller-loading-icon {
-    font-size: ${dt('virtualscroller.loader.icon.size')};
-    width: ${dt('virtualscroller.loader.icon.size')};
-    height: ${dt('virtualscroller.loader.icon.size')};
-}
-
 .p-virtualscroller-horizontal > .p-virtualscroller-content {
     display: flex;
 }
@@ -62,5 +67,6 @@ const theme = ({ dt }) => `
 
 export default BaseStyle.extend({
     name: 'virtualscroller',
+    css,
     theme
 });