progress-meter/animation.scss at master · duplii/progress-meter · GitHub

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
/**************************************************/
/*************** animation specific ***************/
/**************************************************/

$base-size: 140px;
$animation-duration: 9s;

/* This is an adaptation of this clever technique: https://cssanimation.rocks/watch/ */

.progress-indicator-wrapper {
	position: relative;
	width: $base-size;
	height: $base-size;
}
.avatar.mod-call-progress {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
}
.dial-container {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow: hidden;
	width: $base-size / 2;

	.is-pulsing & {
	    animation: pulse .5s ease-out infinite alternate;
	}
}
.wedge {
	height: $base-size;
	width: $base-size / 2;

	.is-running & {
	    animation-play-state: running !important;
	}

	.is-pulsing & {
	    background-image: none !important;
	    background-color: #e82e0b;
	}
}
.container1 {
	left: $base-size / 2;
	transform-origin: left center;
}
.container1 .wedge {
	animation: rotate-bg-1 $animation-duration linear both paused, bg-color $animation-duration linear both paused;
	background-image: linear-gradient(white 0%, #FAD961 90%);
	/* The background size needs to be huge so we can show the correct color at the junction between the two wedges. So clever. */
	background-size: 100% 2000%;
	border-radius: 0 $base-size $base-size 0;
	left: 0;
	transform-origin: left center;
}
.container2 {
	left: 0;
	transform-origin: right center;
}
.container2 .wedge {
	animation: rotate-bg-2 $animation-duration linear both paused, bg-color $animation-duration linear both paused;
	background-image: linear-gradient(to top, #FAD961 10%, #e82e0b 50%);
	/* The background size needs to be huge so we can show the correct color at the junction between the two wedges. So clever. */
	background-size: 100% 2000%;
	background-position: bottom;
	border-radius: $base-size 0 0 $base-size;
	transform-origin: right center;
}
/* First animation. We rotate the wedge into view and resize the bg so that it always show the color we want at the junctions. The intermediate step is used to have a slightly more progressive transition. */
@keyframes rotate-bg-1 {
	0% {
		transform: rotateZ(180deg);
	}
	25% {
	    background-size: 100% 500%;
	}
	50%, 100% {
		transform: rotateZ(360deg);
		background-size: 100% 100%;
	}
}
/* Second animation. We rotate the wedge into view and resize the bg so that it always show the color we want at the junctions. The intermediate step is used to have a slightly more progressive transition. */
@keyframes rotate-bg-2 {
	0%, 50% {
		transform: rotateZ(180deg);
	}
	75% {
	    background-size: 100% 500%;
	}
	100% {
		transform: rotateZ(360deg);
		background-size: 100% 100%;
	}
}
/* Pulsing animation to be added after the other animations end. */
@keyframes pulse {
    100% {
        transform: scale(1.05);
    }
}