mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

perf: active skeleton animated with transform (#35836)

Browse Source 
* active skeleton animated with transform

* properties order fixed

* properties order fixed

* properties order fixed

Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
slotDumpling 2022-06-01 12:13:09 +08:00 committed by GitHub
parent 166100ee1b
commit 1251a4e775
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/skeleton/style/index.less
View File

@ -262,23 +262,34 @@
}
.skeleton-color() {
background: linear-gradient(
90deg,
@skeleton-color 25%,
@skeleton-to-color 37%,
@skeleton-color 63%
);
background-size: 400% 100%;
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
position: relative;
overflow: hidden;
background: #fff;
&::after {
position: absolute;
top: 0;
right: -150%;
bottom: 0;
left: -150%;
background: linear-gradient(
90deg,
@skeleton-color 25%,
@skeleton-to-color 37%,
@skeleton-color 63%
);
animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
content: "";
}
}
@keyframes ~"@{skeleton-prefix-cls}-loading" {
0% {
background-position: 100% 50%;
transform: translateX(-37.5%);
}
100% {
background-position: 0 50%;
transform: translateX(37.5%);
}
}