first commit

common/resources/client/ui/progress/animation.css

@@ -0,0 +1,520 @@
+.progress-circle-fills-animate {
+    will-change: transform;
+    transform: translateZ(0);
+    animation: progress-circle-fills-rotate 1s infinite cubic-bezier(.25,.78,.48,.89);
+    transform-origin: center;
+}
+
+.progress-circle-fill-submask-1-animate {
+    will-change: transform;
+    transform: translateZ(0);
+    animation: progress-circle-fill-mask-1 1s infinite linear;
+}
+
+.progress-circle-fill-submask-2-animate {
+    will-change: transform;
+    transform: translateZ(0);
+    animation: progress-circle-fill-mask-2 1s infinite linear;
+}
+
+@keyframes progress-circle-fill-mask-1 {
+    0% {
+        transform: rotate(90deg);
+    }
+
+    1.69% {
+        transform: rotate(72.3deg);
+    }
+
+    3.39% {
+        transform: rotate(55.5deg);
+    }
+
+    5.08% {
+        transform: rotate(40.3deg);
+    }
+
+    6.78% {
+        transform: rotate(25deg);
+    }
+
+    8.47% {
+        transform: rotate(10.6deg);
+    }
+
+    10.17% {
+        transform: rotate(0deg);
+    }
+
+    11.86% {
+        transform: rotate(0deg);
+    }
+
+    13.56% {
+        transform: rotate(0deg);
+    }
+
+    15.25% {
+        transform: rotate(0deg);
+    }
+
+    16.95% {
+        transform: rotate(0deg);
+    }
+
+    18.64% {
+        transform: rotate(0deg);
+    }
+
+    20.34% {
+        transform: rotate(0deg);
+    }
+
+    22.03% {
+        transform: rotate(0deg);
+    }
+
+    23.73% {
+        transform: rotate(0deg);
+    }
+
+    25.42% {
+        transform: rotate(0deg);
+    }
+
+    27.12% {
+        transform: rotate(0deg);
+    }
+
+    28.81% {
+        transform: rotate(0deg);
+    }
+
+    30.51% {
+        transform: rotate(0deg);
+    }
+
+    32.2% {
+        transform: rotate(0deg);
+    }
+
+    33.9% {
+        transform: rotate(0deg);
+    }
+
+    35.59% {
+        transform: rotate(0deg);
+    }
+
+    37.29% {
+        transform: rotate(0deg);
+    }
+
+    38.98% {
+        transform: rotate(0deg);
+    }
+
+    40.68% {
+        transform: rotate(0deg);
+    }
+
+    42.37% {
+        transform: rotate(5.3deg);
+    }
+
+    44.07% {
+        transform: rotate(13.4deg);
+    }
+
+    45.76% {
+        transform: rotate(20.6deg);
+    }
+
+    47.46% {
+        transform: rotate(29deg);
+    }
+
+    49.15% {
+        transform: rotate(36.5deg);
+    }
+
+    50.85% {
+        transform: rotate(42.6deg);
+    }
+
+    52.54% {
+        transform: rotate(48.8deg);
+    }
+
+    54.24% {
+        transform: rotate(54.2deg);
+    }
+
+    55.93% {
+        transform: rotate(59.4deg);
+    }
+
+    57.63% {
+        transform: rotate(63.2deg);
+    }
+
+    59.32% {
+        transform: rotate(67.2deg);
+    }
+
+    61.02% {
+        transform: rotate(70.8deg);
+    }
+
+    62.71% {
+        transform: rotate(73.8deg);
+    }
+
+    64.41% {
+        transform: rotate(76.2deg);
+    }
+
+    66.1% {
+        transform: rotate(78.7deg);
+    }
+
+    67.8% {
+        transform: rotate(80.6deg);
+    }
+
+    69.49% {
+        transform: rotate(82.6deg);
+    }
+
+    71.19% {
+        transform: rotate(83.7deg);
+    }
+
+    72.88% {
+        transform: rotate(85deg);
+    }
+
+    74.58% {
+        transform: rotate(86.3deg);
+    }
+
+    76.27% {
+        transform: rotate(87deg);
+    }
+
+    77.97% {
+        transform: rotate(87.7deg);
+    }
+
+    79.66% {
+        transform: rotate(88.3deg);
+    }
+
+    81.36% {
+        transform: rotate(88.6deg);
+    }
+
+    83.05% {
+        transform: rotate(89.2deg);
+    }
+
+    84.75% {
+        transform: rotate(89.2deg);
+    }
+
+    86.44% {
+        transform: rotate(89.5deg);
+    }
+
+    88.14% {
+        transform: rotate(89.9deg);
+    }
+
+    89.83% {
+        transform: rotate(89.7deg);
+    }
+
+    91.53% {
+        transform: rotate(90.1deg);
+    }
+
+    93.22% {
+        transform: rotate(90.2deg);
+    }
+
+    94.92% {
+        transform: rotate(90.1deg);
+    }
+
+    96.61% {
+        transform: rotate(90deg);
+    }
+
+    98.31% {
+        transform: rotate(89.8deg);
+    }
+
+    100% {
+        transform: rotate(90deg);
+    }
+}
+@keyframes progress-circle-fill-mask-2 {
+    0% {
+        transform: rotate(180deg);
+    }
+
+    1.69% {
+        transform: rotate(180deg);
+    }
+
+    3.39% {
+        transform: rotate(180deg);
+    }
+
+    5.08% {
+        transform: rotate(180deg);
+    }
+
+    6.78% {
+        transform: rotate(180deg);
+    }
+
+    8.47% {
+        transform: rotate(180deg);
+    }
+
+    10.17% {
+        transform: rotate(179.2deg);
+    }
+
+    11.86% {
+        transform: rotate(164deg);
+    }
+
+    13.56% {
+        transform: rotate(151.8deg);
+    }
+
+    15.25% {
+        transform: rotate(140.8deg);
+    }
+
+    16.95% {
+        transform: rotate(130.3deg);
+    }
+
+    18.64% {
+        transform: rotate(120.4deg);
+    }
+
+    20.34% {
+        transform: rotate(110.8deg);
+    }
+
+    22.03% {
+        transform: rotate(101.6deg);
+    }
+
+    23.73% {
+        transform: rotate(93.5deg);
+    }
+
+    25.42% {
+        transform: rotate(85.4deg);
+    }
+
+    27.12% {
+        transform: rotate(78.1deg);
+    }
+
+    28.81% {
+        transform: rotate(71.2deg);
+    }
+
+    30.51% {
+        transform: rotate(89.1deg);
+    }
+
+    32.2% {
+        transform: rotate(105.5deg);
+    }
+
+    33.9% {
+        transform: rotate(121.3deg);
+    }
+
+    35.59% {
+        transform: rotate(135.5deg);
+    }
+
+    37.29% {
+        transform: rotate(148.4deg);
+    }
+
+    38.98% {
+        transform: rotate(161deg);
+    }
+
+    40.68% {
+        transform: rotate(173.5deg);
+    }
+
+    42.37% {
+        transform: rotate(180deg);
+    }
+
+    44.07% {
+        transform: rotate(180deg);
+    }
+
+    45.76% {
+        transform: rotate(180deg);
+    }
+
+    47.46% {
+        transform: rotate(180deg);
+    }
+
+    49.15% {
+        transform: rotate(180deg);
+    }
+
+    50.85% {
+        transform: rotate(180deg);
+    }
+
+    52.54% {
+        transform: rotate(180deg);
+    }
+
+    54.24% {
+        transform: rotate(180deg);
+    }
+
+    55.93% {
+        transform: rotate(180deg);
+    }
+
+    57.63% {
+        transform: rotate(180deg);
+    }
+
+    59.32% {
+        transform: rotate(180deg);
+    }
+
+    61.02% {
+        transform: rotate(180deg);
+    }
+
+    62.71% {
+        transform: rotate(180deg);
+    }
+
+    64.41% {
+        transform: rotate(180deg);
+    }
+
+    66.1% {
+        transform: rotate(180deg);
+    }
+
+    67.8% {
+        transform: rotate(180deg);
+    }
+
+    69.49% {
+        transform: rotate(180deg);
+    }
+
+    71.19% {
+        transform: rotate(180deg);
+    }
+
+    72.88% {
+        transform: rotate(180deg);
+    }
+
+    74.58% {
+        transform: rotate(180deg);
+    }
+
+    76.27% {
+        transform: rotate(180deg);
+    }
+
+    77.97% {
+        transform: rotate(180deg);
+    }
+
+    79.66% {
+        transform: rotate(180deg);
+    }
+
+    81.36% {
+        transform: rotate(180deg);
+    }
+
+    83.05% {
+        transform: rotate(180deg);
+    }
+
+    84.75% {
+        transform: rotate(180deg);
+    }
+
+    86.44% {
+        transform: rotate(180deg);
+    }
+
+    88.14% {
+        transform: rotate(180deg);
+    }
+
+    89.83% {
+        transform: rotate(180deg);
+    }
+
+    91.53% {
+        transform: rotate(180deg);
+    }
+
+    93.22% {
+        transform: rotate(180deg);
+    }
+
+    94.92% {
+        transform: rotate(180deg);
+    }
+
+    96.61% {
+        transform: rotate(180deg);
+    }
+
+    98.31% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(180deg);
+    }
+}
+
+@keyframes progress-circle-fills-rotate {
+    0% {transform: rotate(-90deg)}
+    100% {transform: rotate(270deg)}
+}
+
+
+.progress-bar-indeterminate-animate {
+    animation: progress-bar-indeterminate 1s infinite;
+}
+
+@keyframes progress-bar-indeterminate {
+    from {
+        transform: translate(calc(100% * -1));
+    }
+    to {
+        transform: translate(100%);
+    }
+}