sposchedule

1
export default {
2
  css: `
3
    *[data-pd-ripple="true"]{
4
        overflow: hidden;
5
        position: relative;
6
    }
7
    span[data-p-ink-active="true"]{
8
        animation: ripple 0.4s linear;
9
    }
10
    @keyframes ripple {
11
        100% {
12
            opacity: 0;
13
            transform: scale(2.5);
14
        }
15
    }
16

17
    .progress-spinner-circle {
18
        stroke-dasharray: 89, 200;
19
        stroke-dashoffset: 0;
20
        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
21
        stroke-linecap: round;
22
    }
23

24
    @keyframes p-progress-spinner-dash{
25
        0% {
26
            stroke-dasharray: 1, 200;
27
            stroke-dashoffset: 0;
28
        }
29

30
        50% {
31
            stroke-dasharray: 89, 200;
32
            stroke-dashoffset: -35px;
33
        }
34
        100% {
35
            stroke-dasharray: 89, 200;
36
            stroke-dashoffset: -124px;
37
        }
38
    }
39
    @keyframes p-progress-spinner-color {
40
        100%, 0% {
41
            stroke: #ff5757;
42
        }
43
        40% {
44
            stroke: #696cff;
45
        }
46
        66% {
47
            stroke: #1ea97c;
48
        }
49
        80%, 90% {
50
            stroke: #cc8925;
51
        }
52
    }
53

54
    .progressbar-value-animate::after {
55
        will-change: left, right;
56
        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
57
    }
58
    .progressbar-value-animate::before {
59
        will-change: left, right;
60
        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
61
    }
62
    @keyframes p-progressbar-indeterminate-anim {
63
        0% {
64
            left: -35%;
65
            right: 100%;
66
        }
67
        60% {
68
            left: 100%;
69
            right: -90%;
70
        }
71
        100% {
72
            left: 100%;
73
            right: -90%;
74
        }
75
    }
76

77
    .p-fadein {
78
        animation: p-fadein 250ms linear;
79
    }
80

81
    @keyframes p-fadein {
82
        0% {
83
            opacity: 0;
84
        }
85
        100% {
86
            opacity: 1;
87
        }
88
    }
89
`,
90
};
91