Skip to content

Commit f4ac99d

Browse files
tnhutnhu
committed
Refactor to fix animation under Safari
1 parent 333a9aa commit f4ac99d

File tree

3 files changed

+79
-40
lines changed

3 files changed

+79
-40
lines changed

‎README.md

+28-10
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,35 @@ You are able to customize the dot by CSS variables, default configuration is lis
4040

4141
```css
4242
:root {
43-
--status-indicator-color: 216, 226, 233; /* #D8E2E9 */
44-
--status-indicator-color-active: 0, 149, 255; /* #0095FF */
45-
--status-indicator-color-positive: 75, 210, 143; /* #4BD28F */
46-
--status-indicator-color-intermediary: 255, 170, 0; /* #FFAA00 */
47-
--status-indicator-color-negative: 255, 77, 77; /* #FF4D4D */
4843
--status-indicator-size: 10px;
49-
--status-indicator-animation-time: 2s;
50-
--status-indicator-pulse-start-alpha: .5;
51-
--status-indicator-pulse-end-alpha: 0;
52-
}
53-
```
44+
45+
--status-indicator-animation-duration: 2s;
46+
--status-indicator-pulse-semi-alpha: .5;
47+
48+
--status-indicator-color: rgb(216, 226, 233);
49+
--status-indicator-color-semi: rgba(216, 226, 233, var(--status-indicator-pulse-semi-alpha));
50+
--status-indicator-color-transparent: rgba(216, 226, 233, 0);
51+
52+
--status-indicator-color-active: rgb(0, 149, 255);
53+
--status-indicator-color-active-semi: rgba(0, 149, 255, var(--status-indicator-pulse-semi-alpha));
54+
--status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
55+
56+
--status-indicator-color-positive: rgb(75, 210, 143);
57+
--status-indicator-color-positive-semi: rgba(75, 210, 143, var(--status-indicator-pulse-semi-alpha));
58+
--status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
59+
60+
--status-indicator-color-intermediary: rgb(255, 170, 0);
61+
--status-indicator-color-intermediary-semi: rgba(255, 170, 0, var(--status-indicator-pulse-semi-alpha));
62+
--status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
63+
64+
--status-indicator-color-negative: rgb(255, 77, 77);
65+
--status-indicator-color-negative-semi: rgba(255, 77, 77, var(--status-indicator-pulse-semi-alpha));
66+
--status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
67+
}```
68+
69+
### Supported Browsers
70+
71+
Latest versions of Chrome/Firefox/Safari/IE/Opera.
5472

5573
### LICENSE
5674

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "status-indicator",
3-
"version": "1.0.5",
3+
"version": "1.0.7",
44
"description": "Status indicator web component",
55
"style": "styles.css",
66
"repository": {

‎styles.css

+50-29
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,58 @@
11
:root {
2-
--status-indicator-color: 216, 226, 233; /* #D8E2E9 */
3-
--status-indicator-color-active: 0, 149, 255; /* #0095FF */
4-
--status-indicator-color-positive: 75, 210, 143; /* #4BD28F */
5-
--status-indicator-color-intermediary: 255, 170, 0; /* #FFAA00 */
6-
--status-indicator-color-negative: 255, 77, 77; /* #FF4D4D */
72
--status-indicator-size: 10px;
8-
--status-indicator-animation-time: 2s;
9-
--status-indicator-pulse-start-alpha: .5;
10-
--status-indicator-pulse-end-alpha: 0;
3+
4+
--status-indicator-animation-duration: 2s;
5+
--status-indicator-pulse-semi-alpha: .5;
6+
7+
--status-indicator-color: rgb(216, 226, 233);
8+
--status-indicator-color-semi: rgba(216, 226, 233, var(--status-indicator-pulse-semi-alpha));
9+
--status-indicator-color-transparent: rgba(216, 226, 233, 0);
10+
11+
--status-indicator-color-active: rgb(0, 149, 255);
12+
--status-indicator-color-active-semi: rgba(0, 149, 255, var(--status-indicator-pulse-semi-alpha));
13+
--status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
14+
15+
--status-indicator-color-positive: rgb(75, 210, 143);
16+
--status-indicator-color-positive-semi: rgba(75, 210, 143, var(--status-indicator-pulse-semi-alpha));
17+
--status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
18+
19+
--status-indicator-color-intermediary: rgb(255, 170, 0);
20+
--status-indicator-color-intermediary-semi: rgba(255, 170, 0, var(--status-indicator-pulse-semi-alpha));
21+
--status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
22+
23+
--status-indicator-color-negative: rgb(255, 77, 77);
24+
--status-indicator-color-negative-semi: rgba(255, 77, 77, var(--status-indicator-pulse-semi-alpha));
25+
--status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
1126
}
1227

1328
@keyframes status-indicator-pulse {
14-
0% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color), var(--status-indicator-pulse-start-alpha)); }
15-
70% { box-shadow: 0 0 0 var(--status-indicator-size) rgba(var(--status-indicator-color), var(--status-indicator-pulse-end-alpha)); }
16-
100% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color), var(--status-indicator-pulse-end-alpha)); }
29+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-semi); }
30+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-transparent); }
31+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-transparent); }
1732
}
1833

1934
@keyframes status-indicator-pulse-active {
20-
0% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-active), var(--status-indicator-pulse-start-alpha)); }
21-
70% { box-shadow: 0 0 0 var(--status-indicator-size) rgba(var(--status-indicator-color-active), var(--status-indicator-pulse-end-alpha)); }
22-
100% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-active), var(--status-indicator-pulse-end-alpha)); }
35+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-active-semi); }
36+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-active-transparent); }
37+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-active-transparent); }
2338
}
2439

2540
@keyframes status-indicator-pulse-positive {
26-
0% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-positive), var(--status-indicator-pulse-start-alpha)); }
27-
70% { box-shadow: 0 0 0 var(--status-indicator-size) rgba(var(--status-indicator-color-positive), var(--status-indicator-pulse-end-alpha)); }
28-
100% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-positive), var(--status-indicator-pulse-end-alpha)); }
41+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-positive-semi); }
42+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-positive-transparent); }
43+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-positive-transparent); }
2944
}
3045

3146
@keyframes status-indicator-pulse-intermediary {
32-
0% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-intermediary), var(--status-indicator-pulse-start-alpha)); }
33-
70% { box-shadow: 0 0 0 var(--status-indicator-size) rgba(var(--status-indicator-color-intermediary), var(--status-indicator-pulse-end-alpha)); }
34-
100% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-intermediary), var(--status-indicator-pulse-end-alpha)); }
47+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-semi); }
48+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-intermediary-transparent); }
49+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-transparent); }
3550
}
3651

3752
@keyframes status-indicator-pulse-negative {
38-
0% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-negative), var(--status-indicator-pulse-start-alpha)); }
39-
70% { box-shadow: 0 0 0 var(--status-indicator-size) rgba(var(--status-indicator-color-negative), var(--status-indicator-pulse-end-alpha)); }
40-
100% { box-shadow: 0 0 0 0 rgba(var(--status-indicator-color-negative), var(--status-indicator-pulse-end-alpha)); }
53+
0% { box-shadow: 0 0 0 0 var(--status-indicator-color-negative-semi); }
54+
70% { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-negative-transparent); }
55+
100% { box-shadow: 0 0 0 0 var(--status-indicator-color-negative-transparent); }
4156
}
4257

4358
status-indicator {
@@ -46,23 +61,29 @@ status-indicator {
4661
cursor: pointer;
4762
width: var(--status-indicator-size);
4863
height: var(--status-indicator-size);
49-
background-color: rgb(var(--status-indicator-color));
64+
background-color: var(--status-indicator-color);
5065
}
5166

5267
status-indicator[pulse] {
53-
animation: status-indicator-pulse var(--status-indicator-animation-time) infinite;
68+
animation-name: status-indicator-pulse;
69+
animation-duration: var(--status-indicator-animation-duration);
70+
animation-timing-function: ease-in-out;
71+
animation-iteration-count: infinite;
72+
animation-direction: normal;
73+
animation-delay: 0;
74+
animation-fill-mode: none;
5475
}
5576

5677
status-indicator[active] {
57-
background-color: rgb(var(--status-indicator-color-active, #0095FF));
78+
background-color: var(--status-indicator-color-active);
5879
}
5980

6081
status-indicator[active][pulse] {
6182
animation-name: status-indicator-pulse-active;
6283
}
6384

6485
status-indicator[positive] {
65-
background-color: rgb(var(--status-indicator-color-positive, #4BD28F));
86+
background-color: var(--status-indicator-color-positive);
6687
animation-name: status-indicator-pulse-positive;
6788
}
6889

@@ -71,15 +92,15 @@ status-indicator[positive][pulse] {
7192
}
7293

7394
status-indicator[intermediary] {
74-
background-color: rgb(var(--status-indicator-color-intermediary, #FFAA00));
95+
background-color: var(--status-indicator-color-intermediary);
7596
}
7697

7798
status-indicator[intermediary][pulse] {
7899
animation-name: status-indicator-pulse-intermediary;
79100
}
80101

81102
status-indicator[negative] {
82-
background-color: rgb(var(--status-indicator-color-negative, #FF4D4D));
103+
background-color: var(--status-indicator-color-negative);
83104
animation-name: status-indicator-pulse-negative;
84105
}
85106

0 commit comments

Comments
 (0)