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
|
/* Copyright 2024 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=style-lit
* #import=../cr_hidden_style_lit.css.js
* #import=../cr_shared_vars.css.js
* #scheme=relative
* #include=cr-hidden-style-lit
* #css_wrapper_metadata_end */
:host {
display: block;
width: 200px;
position: relative;
overflow: hidden;
}
#progressContainer {
position: relative;
}
#progressContainer,
/* the stripe for the indeterminate animation*/
:host([indeterminate]) #primaryProgress::after {
height: var(--cr-progress-height, 4px);
}
#primaryProgress,
:host([indeterminate]) #primaryProgress::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#progressContainer,
:host([indeterminate]) #primaryProgress::after {
background: var(--cr-progress-container-color, var(--google-grey-300));
}
#primaryProgress {
transform-origin: left center;
transform: scaleX(0);
will-change: transform;
}
#primaryProgress {
background: var(--cr-progress-active-color, var(--google-green-500));
}
:host([disabled]) #primaryProgress {
background: var(--cr-progress-disabled-active-color,
var(--google-grey-500));
}
:host([indeterminate]:not([disabled])) #primaryProgress {
transform-origin: right center;
animation: indeterminate-bar
var(--cr-progress-indeterminate-cycle-duration, 2s) linear infinite;
}
:host([indeterminate]:not([disabled])) #primaryProgress::after {
content: "";
transform-origin: center center;
animation: indeterminate-splitter
var(--cr-progress-indeterminate-cycle-duration, 2s) linear infinite;
}
@keyframes indeterminate-bar {
0% {
transform: scaleX(1) translateX(-100%);
}
50% {
transform: scaleX(1) translateX(0%);
}
75% {
transform: scaleX(1) translateX(0%);
animation-timing-function: cubic-bezier(.28,.62,.37,.91);
}
100% {
transform: scaleX(0) translateX(0%);
}
}
@keyframes indeterminate-splitter {
0% {
transform: scaleX(.75) translateX(-125%);
}
30% {
transform: scaleX(.75) translateX(-125%);
animation-timing-function: cubic-bezier(.42,0,.6,.8);
}
90% {
transform: scaleX(.75) translateX(125%);
}
100% {
transform: scaleX(.75) translateX(125%);
}
}
|
