diff --git a/components/lib/progressspinner/style/ProgressSpinnerStyle.js b/components/lib/progressspinner/style/ProgressSpinnerStyle.js
index 2b3f10e1e..fc94f6139 100644
--- a/components/lib/progressspinner/style/ProgressSpinnerStyle.js
+++ b/components/lib/progressspinner/style/ProgressSpinnerStyle.js
@@ -1,9 +1,9 @@
 import BaseStyle from 'primevue/base/style';
 
 const classes = {
-    root: 'p-progress-spinner',
-    spinner: 'p-progress-spinner-svg',
-    circle: 'p-progress-spinner-circle'
+    root: 'p-progressspinner',
+    spinner: 'p-progressspinner-spin',
+    circle: 'p-progressspinner-circle'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/progressspinner/index.js b/components/lib/themes/primeone/base/progressspinner/index.js
index ca5716d00..86932c803 100644
--- a/components/lib/themes/primeone/base/progressspinner/index.js
+++ b/components/lib/themes/primeone/base/progressspinner/index.js
@@ -1,6 +1,6 @@
 export default {
     css: ({ dt }) => `
-.p-progress-spinner {
+.p-progressspinner {
     position: relative;
     margin: 0 auto;
     width: 100px;
@@ -8,13 +8,13 @@ export default {
     display: inline-block;
 }
 
-.p-progress-spinner::before {
+.p-progressspinner::before {
     content: "";
     display: block;
     padding-top: 100%;
 }
 
-.p-progress-spinner-svg {
+.p-progressspinner-spin {
     height: 100%;
     transform-origin: center center;
     width: 100%;
@@ -24,23 +24,23 @@ export default {
     left: 0;
     right: 0;
     margin: auto;
-    animation: p-progress-spinner-rotate 2s linear infinite;
+    animation: p-progressspinner-rotate 2s linear infinite;
 }
 
-.p-progress-spinner-circle {
+.p-progressspinner-circle {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: 0;
     stroke: ${dt('progressspinner.color-1')};
-    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+    animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
     stroke-linecap: round;
 }
 
-@keyframes p-progress-spinner-rotate {
+@keyframes p-progressspinner-rotate {
     100% {
         transform: rotate(360deg);
     }
 }
-@keyframes p-progress-spinner-dash {
+@keyframes p-progressspinner-dash {
     0% {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0;
@@ -54,7 +54,7 @@ export default {
         stroke-dashoffset: -124px;
     }
 }
-@keyframes p-progress-spinner-color {
+@keyframes p-progressspinner-color {
     100%,
     0% {
         stroke: ${dt('progressspinner.color-1')};