diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 73dc7525825ebb55e32f604aa5f722705f639b84..44b244ac74ed25335cacc35db5cc3c209474b3eb 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -159,6 +159,51 @@ $after-content-order: 3;
   width: 100% !important;
 }
 
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.connectingSpinner {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  color: var(--color-white-with-transparency);
+  font-size: 2.5rem;
+  text-align: center;
+  white-space: nowrap;
+  z-index: 1;
+
+
+  &::after {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin: 0 -0.25em 0 0;
+
+    [dir="rtl"] & {
+      margin: 0 0 0 -0.25em
+    }
+  }
+
+  &::before {
+    content: "\e949";
+    /* ascii code for the ellipsis character */
+    font-family: 'bbb-icons' !important;
+    display: inline-block;
+
+    :global(.animationsEnabled) & {
+      animation: spin 4s infinite linear;
+    }
+  }
+}
 
 span[class^=resizeWrapper] {
   div {
@@ -166,4 +211,4 @@ span[class^=resizeWrapper] {
     z-index: 1;
     bottom: -10px !important;
   }
-}
\ No newline at end of file
+}
diff --git a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
index 74e285a439fd4e6b945514c82f577cc1071aac2b..aff8c3d1932b53bfe58544b3a3dc44a37bb7942b 100755
--- a/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/screenshare/styles.scss
@@ -1,8 +1,8 @@
 @import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/components/video-provider/video-list/styles";
+@import "/imports/ui/components/media/styles";
 
 .connecting {
-  @extend .connecting;
+  @extend .connectingSpinner;
   z-index: -1;
   background-color: transparent;
   color: var(--color-white);
@@ -17,4 +17,4 @@
   position: relative;
   width: 100%;
   height: 100%;
-}
\ No newline at end of file
+}
diff --git a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
index c6e73384aa3eea9fbe5aed4ef35a12846333d835..6c1bce3c853952c0c20b24eca415a4c7f810e51c 100755
--- a/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss
@@ -93,16 +93,6 @@
   cursor: grabbing;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(-360deg);
-  }
-}
-
 .videoContainer{
   width: 100%;
   height: 100%;