diff --git a/docs/pages/api/skeleton.md b/docs/pages/api/skeleton.md
index 4a086926ebb507..3d19574440a630 100644
--- a/docs/pages/api/skeleton.md
+++ b/docs/pages/api/skeleton.md
@@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
+| animation | 'pulse'
| 'wave'
| false | 'pulse' | The animation. If `false` the animation effect is disabled. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| disableAnimate | bool | false | If `true` the animation effect is disabled. |
| height | number
| string | | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. |
| variant | 'text'
| 'rect'
| 'circle' | 'text' | The type of content that will be rendered. |
| width | number
| string | | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. |
@@ -46,7 +46,8 @@ Any other props supplied will be provided to the root element (native element).
| text | .MuiSkeleton-text | Styles applied to the root element if `variant="text"`.
| rect | .MuiSkeleton-rect | Styles applied to the root element if `variant="rect"`.
| circle | .MuiSkeleton-circle | Styles applied to the root element if `variant="circle"`.
-| animate | .MuiSkeleton-animate | Styles applied to the root element if `disabledAnimate={false}`.
+| pulse | .MuiSkeleton-pulse | Styles applied to the root element if `animation="pulse"`.
+| wave | .MuiSkeleton-wave | Styles applied to the root element if `animation="wave"`.
You can override the style of the component thanks to one of these customization points:
diff --git a/docs/src/pages/components/skeleton/Animations.js b/docs/src/pages/components/skeleton/Animations.js
new file mode 100644
index 00000000000000..a23dfa34578b75
--- /dev/null
+++ b/docs/src/pages/components/skeleton/Animations.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+export default function Animations() {
+ const classes = useStyles();
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs/src/pages/components/skeleton/Animations.tsx b/docs/src/pages/components/skeleton/Animations.tsx
new file mode 100644
index 00000000000000..a23dfa34578b75
--- /dev/null
+++ b/docs/src/pages/components/skeleton/Animations.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+ root: {
+ width: 300,
+ },
+});
+
+export default function Animations() {
+ const classes = useStyles();
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md
index 8429da1cfb92b0..36fa8f08141722 100644
--- a/docs/src/pages/components/skeleton/skeleton.md
+++ b/docs/src/pages/components/skeleton/skeleton.md
@@ -22,10 +22,16 @@ For instance:
## Variants
-The component supports 3 variants.
+The component supports 3 shape variants.
{{"demo": "pages/components/skeleton/Variants.js"}}
+## Animations
+
+By default, the skeleton pulsate, but you can change the animation for a wave or disable it entirely.
+
+{{"demo": "pages/components/skeleton/Animations.js"}}
+
## YouTube example
{{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}}
diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts
index 72b8abdfd13edb..1401fec029442b 100644
--- a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts
+++ b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts
@@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '@material-ui/core/Overridab
export interface SkeletonTypeMap {
props: P & {
- disableAnimate?: boolean;
+ animation?: 'pulse' | 'wave' | false;
height?: number | string;
variant?: 'text' | 'rect' | 'circle';
width?: number | string;
diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js
index a24bdb36e877a9..c4696edc76d578 100644
--- a/packages/material-ui-lab/src/Skeleton/Skeleton.js
+++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js
@@ -28,11 +28,11 @@ export const styles = theme => ({
circle: {
borderRadius: '50%',
},
- /* Styles applied to the root element if `disabledAnimate={false}`. */
- animate: {
- animation: '$animate 1.5s ease-in-out 0.5s infinite',
+ /* Styles applied to the root element if `animation="pulse"`. */
+ pulse: {
+ animation: '$pulse 1.5s ease-in-out 0.5s infinite',
},
- '@keyframes animate': {
+ '@keyframes pulse': {
'0%': {
opacity: 1,
},
@@ -43,14 +43,38 @@ export const styles = theme => ({
opacity: 1,
},
},
+ /* Styles applied to the root element if `animation="wave"`. */
+ wave: {
+ position: 'relative',
+ overflow: 'hidden',
+ '&::after': {
+ animation: '$wave 1.5s linear 0.5s infinite',
+ background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)',
+ content: '""',
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ top: 0,
+ zIndex: 1,
+ },
+ },
+ '@keyframes wave': {
+ '0%': {
+ transform: 'translateX(-100%)',
+ },
+ '100%': {
+ transform: 'translateX(100%)',
+ },
+ },
});
const Skeleton = React.forwardRef(function Skeleton(props, ref) {
const {
+ animation = 'pulse',
classes,
className,
component: Component = 'div',
- disableAnimate = false,
height,
variant = 'text',
width,
@@ -64,7 +88,7 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) {
classes.root,
classes[variant],
{
- [classes.animate]: !disableAnimate,
+ [classes[animation]]: animation !== false,
},
className,
)}
@@ -79,6 +103,11 @@ const Skeleton = React.forwardRef(function Skeleton(props, ref) {
});
Skeleton.propTypes = {
+ /**
+ * The animation.
+ * If `false` the animation effect is disabled.
+ */
+ animation: PropTypes.oneOf(['pulse', 'wave', false]),
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
@@ -93,10 +122,6 @@ Skeleton.propTypes = {
* Either a string to use a DOM element or a component.
*/
component: PropTypes.elementType,
- /**
- * If `true` the animation effect is disabled.
- */
- disableAnimate: PropTypes.bool,
/**
* Height of the skeleton.
* Useful when you don't want to adapt the skeleton to a text element but for instance a card.