forked from jamesjjk/react-progress-button
-
Notifications
You must be signed in to change notification settings - Fork 0
/
react-progress-button.css
104 lines (104 loc) · 2.33 KB
/
react-progress-button.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
.pb-container {
display: inline-block;
text-align: center;
width: 100%;
}
.pb-container .pb-button {
background: transparent;
border: 2px solid currentColor;
border-radius: 27px;
color: currentColor;
cursor: pointer;
padding: 0.7em 1em;
text-decoration: none;
text-align: center;
height: 54px;
width: 100%;
-webkit-tap-highlight-color: transparent;
outline: none;
transition: background-color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s, border-radius 0.3s;
}
.pb-container .pb-button span {
display: inherit;
transition: opacity 0.3s 0.1s;
font-size: 2em;
font-weight: 100;
}
.pb-container .pb-button svg {
height: 54px;
width: 54px;
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
}
.pb-container .pb-button svg path {
opacity: 0;
fill: none;
}
.pb-container .pb-button svg.pb-progress-circle {
animation: spin 0.9s infinite cubic-bezier(0.085, 0.260, 0.935, 0.710);
}
.pb-container .pb-button svg.pb-progress-circle path {
stroke: currentColor;
stroke-width: 5;
}
.pb-container .pb-button svg.pb-checkmark path,
.pb-container .pb-button svg.pb-cross path {
stroke: #fff;
stroke-linecap: round;
stroke-width: 4;
}
.pb-container.disable .pb-button {
cursor: not-allowed;
}
.pb-container.loading .pb-button {
width: 54px;
border-width: 6.5px;
border-color: #ddd;
cursor: wait;
background-color: transparent;
padding: 0;
}
.pb-container.loading .pb-button span {
transition: all 0.15s;
opacity: 0;
display: none;
}
.pb-container.loading .pb-button .pb-progress-circle > path {
transition: opacity 0.15s 0.3s;
opacity: 1;
}
.pb-container.success .pb-button {
border-color: #A0D468;
background-color: #A0D468;
}
.pb-container.success .pb-button span {
transition: all 0.15s;
opacity: 0;
display: none;
}
.pb-container.success .pb-button .pb-checkmark > path {
opacity: 1;
}
.pb-container.error .pb-button {
border-color: #ED5565;
background-color: #ED5565;
}
.pb-container.error .pb-button span {
transition: all 0.15s;
opacity: 0;
display: none;
}
.pb-container.error .pb-button .pb-cross > path {
opacity: 1;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center center;
}
to {
transform: translate(-50%, -50%) rotate(360deg);
transform-origin: center center;
}
}