depicter / resources / scripts / loadings / snippets / dotFlashing / styles.scss

styles.scss in Depicter — Popup & Slider Builder 1.9.2, at resources/scripts/loadings/snippets/dotFlashing/styles.scss

95 lines 1.6 KB

Raw Download Zip

1	// Variables ---------------------------------------------------
2	$size: 12px;
3	$gap: 9px;
4	$radius: 50%;
5	$duration: 1500ms;
6	$timing: cubic-bezier(0.5, 0, 0.75, 0);
7	$darkBackground: #050a0e;
8	$lightBackground: #fff;
9
10	// -------------------------------------------------------------
11
12	.depicter-dot-flashing {
13	display: inline-flex;
14	align-items: center;
15	justify-content: center;
16
17	span {
18	display: inline-block;
19	width: $size;
20	height: $size;
21	margin-right: $gap;
22	border-radius: $radius;
23
24	&:last-of-type {
25	margin-right: 0;
26	}
27	}
28
29	&.depicter-loading-dark {
30	span {
31	background-color: $darkBackground;
32	}
33	}
34
35	&.depicter-loading-light {
36	span {
37	background-color: $lightBackground;
38	}
39	}
40
41	span {
42	will-change: opacity;
43	animation: middleDotFlashing $duration infinite $timing;
44
45	&:first-of-type {
46	animation: firstDotFlashing $duration infinite $timing;
47	}
48
49	&:last-of-type {
50	animation: lastDotFlashing $duration infinite $timing;
51	}
52	}
53
54	@keyframes firstDotFlashing {
55	0% {
56	opacity: 1;
57	}
58	33.3% {
59	opacity: 0.2;
60	}
61	66.6%,
62	100% {
63	opacity: 1;
64	}
65	}
66
67	@keyframes middleDotFlashing {
68	0%,
69	5% {
70	opacity: 1;
71	}
72	38.8% {
73	opacity: 0.2;
74	}
75	72.2%,
76	100% {
77	opacity: 1;
78	}
79	}
80
81	@keyframes lastDotFlashing {
82	0%,
83	23.3% {
84	opacity: 1;
85	}
86	56.6% {
87	opacity: 0.2;
88	}
89	90%,
90	100% {
91	opacity: 1;
92	}
93	}
94	}
95