Last change
on this file since 59329aa was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago |
adding photos
|
-
Property mode
set to
100644
|
File size:
1.3 KB
|
Line | |
---|
1 | .p-progress-spinner {
|
---|
2 | position: relative;
|
---|
3 | margin: 0 auto;
|
---|
4 | width: 100px;
|
---|
5 | height: 100px;
|
---|
6 | display: inline-block;
|
---|
7 | }
|
---|
8 |
|
---|
9 | .p-progress-spinner::before {
|
---|
10 | content: '';
|
---|
11 | display: block;
|
---|
12 | padding-top: 100%;
|
---|
13 | }
|
---|
14 |
|
---|
15 | .p-progress-spinner-svg {
|
---|
16 | animation: p-progress-spinner-rotate 2s linear infinite;
|
---|
17 | height: 100%;
|
---|
18 | transform-origin: center center;
|
---|
19 | width: 100%;
|
---|
20 | position: absolute;
|
---|
21 | top: 0;
|
---|
22 | bottom: 0;
|
---|
23 | left: 0;
|
---|
24 | right: 0;
|
---|
25 | margin: auto;
|
---|
26 | }
|
---|
27 |
|
---|
28 | .p-progress-spinner-circle {
|
---|
29 | stroke-dasharray: 89, 200;
|
---|
30 | stroke-dashoffset: 0;
|
---|
31 | stroke: #d62d20;
|
---|
32 | animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
|
---|
33 | stroke-linecap: round;
|
---|
34 | }
|
---|
35 |
|
---|
36 | @keyframes p-progress-spinner-rotate {
|
---|
37 | 100% {
|
---|
38 | transform: rotate(360deg);
|
---|
39 | }
|
---|
40 | }
|
---|
41 |
|
---|
42 | @keyframes p-progress-spinner-dash {
|
---|
43 | 0% {
|
---|
44 | stroke-dasharray: 1, 200;
|
---|
45 | stroke-dashoffset: 0;
|
---|
46 | }
|
---|
47 | 50% {
|
---|
48 | stroke-dasharray: 89, 200;
|
---|
49 | stroke-dashoffset: -35px;
|
---|
50 | }
|
---|
51 | 100% {
|
---|
52 | stroke-dasharray: 89, 200;
|
---|
53 | stroke-dashoffset: -124px;
|
---|
54 | }
|
---|
55 | }
|
---|
56 |
|
---|
57 | @keyframes p-progress-spinner-color {
|
---|
58 | 100%,
|
---|
59 | 0% {
|
---|
60 | stroke: #d62d20;
|
---|
61 | }
|
---|
62 | 40% {
|
---|
63 | stroke: #0057e7;
|
---|
64 | }
|
---|
65 | 66% {
|
---|
66 | stroke: #008744;
|
---|
67 | }
|
---|
68 | 80%,
|
---|
69 | 90% {
|
---|
70 | stroke: #ffa700;
|
---|
71 | }
|
---|
72 | } |
---|
Note:
See
TracBrowser
for help on using the repository browser.