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

.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%);
    }
}