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
|
/* 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
* #scheme=relative
* #css_wrapper_metadata_end */
:host {
--cr-loading-gradient-color-start: var(--color-loading-gradient-start,
transparent);
--cr-loading-gradient-color-middle: var(--color-loading-gradient-middle,
var(--cr-fallback-color-primary-container));
--cr-loading-gradient-color-end: var(--color-loading-gradient-end,
rgb(231, 248, 237));
display: flex;
width: 100%;
height: fit-content;
position: relative;
}
@media (prefers-color-scheme: dark) {
:host {
--cr-loading-gradient-color-end: var(--color-loading-gradient-end,
rgb(15, 82, 35));
}
}
#gradient {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
var(--cr-loading-gradient-color-start) 0%,
var(--cr-loading-gradient-color-middle) 20%,
var(--cr-loading-gradient-color-end) 40%,
var(--cr-loading-gradient-color-start) 60%,
var(--cr-loading-gradient-color-middle) 80%,
var(--cr-loading-gradient-color-end) 100%);
background-position: 100% 100%;
background-size: 250% 250%;
animation: gradient 2s infinite linear;
}
@keyframes gradient {
0% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
|
