The diagonal sheen is accomplished by the SkeletonAnimator which either goes away or is completely replaced by whatever is needed to accomplish the changing opacity. This may be achieved through pure CSS on the styled div for SkeletonContainer.
Motivation
Looks better? There are also challenges with the diagonal sheen including an edge case on high DPI monitors.
We also have a couple issues this will resolve or make redundant:
Fixes: #134
Fixes: #451
Fixes: #963
NicholasBoll
commented
3 years ago
🚀 Feature Proposal
We'd like to upgrade the animation from a "diagonal sheen" or shimmer to a gradual cycling of opacity.
Storybook story: https://workday.github.io/canvas-kit/?path=/story/components-indicators-skeleton-react--color
Our design reference is still reflecting the currently implemented design, no updated design resources yet: https://design.workday.com/components/indicators/loading-animation
Component code: https://github.com/Workday/canvas-kit/blob/master/modules/skeleton/react/lib/skeleton.tsx
The diagonal sheen is accomplished by the SkeletonAnimator which either goes away or is completely replaced by whatever is needed to accomplish the changing opacity. This may be achieved through pure CSS on the styled div for SkeletonContainer.
Motivation
Looks better? There are also challenges with the diagonal sheen including an edge case on high DPI monitors.
We also have a couple issues this will resolve or make redundant: Fixes: #134 Fixes: #451 Fixes: #963
Example