fix(calendar-web): update loading indicator style and add loading bar component

Author: samuelreichert

packages/pluggableWidgets/calendar-web/src/Calendar.tsx

@@ -30,7 +30,7 @@ export default function MxCalendar(props: CalendarContainerProps): ReactElement
     return (
         <Fragment>
             {props.startDateAttribute && props.startDateAttribute.status !== "available" ? (
-                <div className="mx-progress"></div>
+                <div className="widget-calendar-loading-bar" />
             ) : (
                 <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
                     <DnDCalendar {...calendarProps} {...calendarEvents} />

packages/pluggableWidgets/calendar-web/src/ui/Calendar.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+$brand-primary: #264ae5 !default;
 
 .widget-calendar {
     $cal-form-group-margin-bottom: 15px !default;
@@ -79,4 +80,75 @@
     .rbc-event {
         background-color: var(--brand-primary, $cal-brand-primary);
     }
+
+    &-loading-bar {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: var(--border-color-default, #ced0d3);
+        border: none;
+        border-radius: 2px;
+        color: var(--brand-primary, $brand-primary);
+        height: 4px;
+        width: 100%;
+
+        &::-webkit-progress-bar {
+            background-color: transparent;
+        }
+
+        &::-webkit-progress-value {
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &::-moz-progress-bar {
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &::-ms-fill {
+            border: none;
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &:indeterminate {
+            background-size: 200% 100%;
+            background-image: linear-gradient(
+                to right,
+                transparent 50%,
+                currentColor 50%,
+                currentColor 60%,
+                transparent 60%,
+                transparent 71.5%,
+                currentColor 71.5%,
+                currentColor 84%,
+                transparent 84%
+            );
+            animation: progress-linear 3s infinite linear;
+        }
+
+        &:indeterminate::-moz-progress-bar {
+            background-color: transparent;
+        }
+
+        &:indeterminate::-ms-fill {
+            animation-name: none;
+        }
+
+        @keyframes progress-linear {
+            0% {
+                background-size: 200% 100%;
+                background-position: left -31.25% top 0%;
+            }
+            50% {
+                background-size: 800% 100%;
+                background-position: left -49% top 0%;
+            }
+            100% {
+                background-size: 400% 100%;
+                background-position: left -102% top 0%;
+            }
+        }
+    }
 }