diff --git a/package-lock.json b/package-lock.json
index bbea7b4..466fa72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "react-shimmer",
- "version": "3.0.3",
+ "version": "3.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -14,12 +14,12 @@
}
},
"@babel/compat-data": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.9.6.tgz",
- "integrity": "sha512-5QPTrNen2bm7RBc7dsOmcA5hbrS4O2Vhmk5XOL4zWW/zD/hV0iinpefDlkm+tBBy8kDtFaaeEvmAqt+nURAV2g==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.10.0.tgz",
+ "integrity": "sha512-H59nKm/7ATMfocMobbSk4PkeAerKqoxk+EYBT0kV5sol0e8GBpGNHseZNNYX0VOItKngIf6GgUpEOAlOLIUvDA==",
"dev": true,
"requires": {
- "browserslist": "^4.11.1",
+ "browserslist": "^4.12.0",
"invariant": "^2.2.4",
"semver": "^5.5.0"
},
@@ -71,12 +71,12 @@
}
},
"@babel/generator": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.6.tgz",
- "integrity": "sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.0.tgz",
+ "integrity": "sha512-ThoWCJHlgukbtCP79nAK4oLqZt5fVo70AHUni/y8Jotyg5rtJiG2FVl+iJjRNKIyl4hppqztLyAoEWcCvqyOFQ==",
"dev": true,
"requires": {
- "@babel/types": "^7.9.6",
+ "@babel/types": "^7.10.0",
"jsesc": "^2.5.1",
"lodash": "^4.17.13",
"source-map": "^0.5.0"
@@ -131,13 +131,13 @@
}
},
"@babel/helper-compilation-targets": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.9.6.tgz",
- "integrity": "sha512-x2Nvu0igO0ejXzx09B/1fGBxY9NXQlBW2kZsSxCJft+KHN8t9XWzIvFxtPHnBOAXpVsdxZKZFbRUC8TsNKajMw==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.0.tgz",
+ "integrity": "sha512-PW5Hlc1cQ8bLzY7YsLJP6PQ7GR6ZD8Av4JlP3DZk6QaZJvptsXNDn4Su64EjKAetLTJhVPDp8AEC+j2O6b/Gpg==",
"dev": true,
"requires": {
- "@babel/compat-data": "^7.9.6",
- "browserslist": "^4.11.1",
+ "@babel/compat-data": "^7.10.0",
+ "browserslist": "^4.12.0",
"invariant": "^2.2.4",
"levenary": "^1.1.1",
"semver": "^5.5.0"
@@ -152,16 +152,16 @@
}
},
"@babel/helper-create-class-features-plugin": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.6.tgz",
- "integrity": "sha512-6N9IeuyHvMBRyjNYOMJHrhwtu4WJMrYf8hVbEHD3pbbbmNOk1kmXSQs7bA4dYDUaIx4ZEzdnvo6NwC3WHd/Qow==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.0.tgz",
+ "integrity": "sha512-n4tPJaI0iuLRayriXTQ8brP3fMA/fNmxpxswfNuhe4qXQbcCWzeAqm6SeR/KExIOcdCvOh/KkPQVgBsjcb0oqA==",
"dev": true,
"requires": {
"@babel/helper-function-name": "^7.9.5",
- "@babel/helper-member-expression-to-functions": "^7.8.3",
- "@babel/helper-optimise-call-expression": "^7.8.3",
+ "@babel/helper-member-expression-to-functions": "^7.10.0",
+ "@babel/helper-optimise-call-expression": "^7.10.0",
"@babel/helper-plugin-utils": "^7.8.3",
- "@babel/helper-replace-supers": "^7.9.6",
+ "@babel/helper-replace-supers": "^7.10.0",
"@babel/helper-split-export-declaration": "^7.8.3"
}
},
@@ -227,12 +227,12 @@
}
},
"@babel/helper-member-expression-to-functions": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
- "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.0.tgz",
+ "integrity": "sha512-xKLTpbMkJcvwEsDaTfs9h0IlfUiBLPFfybxaPpPPsQDsZTRg+UKh+86oK7sctHF3OUiRQkb10oS9MXSqgyV6/g==",
"dev": true,
"requires": {
- "@babel/types": "^7.8.3"
+ "@babel/types": "^7.10.0"
}
},
"@babel/helper-module-imports": {
@@ -260,12 +260,12 @@
}
},
"@babel/helper-optimise-call-expression": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
- "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.0.tgz",
+ "integrity": "sha512-HgMd8QKA8wMJs5uK/DYKdyzJAEuGt1zyDp9wLMlMR6LitTQTHPUE+msC82ZsEDwq+U3/yHcIXIngRm9MS4IcIg==",
"dev": true,
"requires": {
- "@babel/types": "^7.8.3"
+ "@babel/types": "^7.10.0"
}
},
"@babel/helper-plugin-utils": {
@@ -297,15 +297,15 @@
}
},
"@babel/helper-replace-supers": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz",
- "integrity": "sha512-qX+chbxkbArLyCImk3bWV+jB5gTNU/rsze+JlcF6Nf8tVTigPJSI1o1oBow/9Resa1yehUO9lIipsmu9oG4RzA==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.0.tgz",
+ "integrity": "sha512-erl4iVeiANf14JszXP7b69bSrz3e3+qW09pVvEmTWwzRQEOoyb1WFlYCA8d/VjVZGYW8+nGpLh7swf9CifH5wg==",
"dev": true,
"requires": {
- "@babel/helper-member-expression-to-functions": "^7.8.3",
- "@babel/helper-optimise-call-expression": "^7.8.3",
- "@babel/traverse": "^7.9.6",
- "@babel/types": "^7.9.6"
+ "@babel/helper-member-expression-to-functions": "^7.10.0",
+ "@babel/helper-optimise-call-expression": "^7.10.0",
+ "@babel/traverse": "^7.10.0",
+ "@babel/types": "^7.10.0"
}
},
"@babel/helper-simple-access": {
@@ -346,14 +346,14 @@
}
},
"@babel/helpers": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.6.tgz",
- "integrity": "sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.0.tgz",
+ "integrity": "sha512-lQtFJoDZAGf/t2PgR6Z59Q2MwjvOGGsxZ0BAlsrgyDhKuMbe63EfbQmVmcLfyTBj8J4UtiadQimcotvYVg/kVQ==",
"dev": true,
"requires": {
- "@babel/template": "^7.8.3",
- "@babel/traverse": "^7.9.6",
- "@babel/types": "^7.9.6"
+ "@babel/template": "^7.10.0",
+ "@babel/traverse": "^7.10.0",
+ "@babel/types": "^7.10.0"
}
},
"@babel/highlight": {
@@ -420,9 +420,9 @@
}
},
"@babel/parser": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.6.tgz",
- "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.0.tgz",
+ "integrity": "sha512-fnDUl1Uy2gThM4IFVW4ISNHqr3cJrCsRkSCasFgx0XDO9JcttDS5ytyBc4Cu4X1+fjoo3IVvFbRD6TeFlHJlEQ==",
"dev": true
},
"@babel/plugin-proposal-async-generator-functions": {
@@ -468,9 +468,9 @@
}
},
"@babel/plugin-proposal-json-strings": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz",
- "integrity": "sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.0.tgz",
+ "integrity": "sha512-n4oQLAAXTFj0OusjIbr6bcvVQf8oH6QziwAK8QNtKhjJAg71+hnU2rZDZYkYMmfOZ46dCWf+ybbHJ7hxfrzFlw==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
@@ -498,9 +498,9 @@
}
},
"@babel/plugin-proposal-object-rest-spread": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.6.tgz",
- "integrity": "sha512-Ga6/fhGqA9Hj+y6whNpPv8psyaK5xzrQwSPsGPloVkvmH+PqW1ixdnfJ9uIO06OjQNYol3PMnfmJ8vfZtkzF+A==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.0.tgz",
+ "integrity": "sha512-DOD+4TqMcRKJdAfN08+v9cciK5d0HW5hwTndOoKZEfEzU/mRrKboheD5mnWU4Q96VOnDdAj86kKjZhoQyG6s+A==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
@@ -519,15 +519,25 @@
}
},
"@babel/plugin-proposal-optional-chaining": {
- "version": "7.9.0",
- "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
- "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.0.tgz",
+ "integrity": "sha512-bn+9XT8Y6FJCO37ewj4E1gIirR35nDm+mGcqQV4dM3LKSVp3QTAU3f65Z0ld4y6jdfAlv2VKzCh4mezhRnl+6Q==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
"@babel/plugin-syntax-optional-chaining": "^7.8.0"
}
},
+ "@babel/plugin-proposal-private-methods": {
+ "version": "7.8.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.8.3.tgz",
+ "integrity": "sha512-ysLAper960yy1TVXa2lMYdCQIGqtUXo8sVb+zYE7UTiZSLs6/wbZ0PrrXEKESJcK3SgFWrF8WpsaDzdslhuoZA==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-create-class-features-plugin": "^7.8.3",
+ "@babel/helper-plugin-utils": "^7.8.3"
+ }
+ },
"@babel/plugin-proposal-unicode-property-regex": {
"version": "7.8.8",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz",
@@ -547,6 +557,15 @@
"@babel/helper-plugin-utils": "^7.8.0"
}
},
+ "@babel/plugin-syntax-class-properties": {
+ "version": "7.8.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.8.3.tgz",
+ "integrity": "sha512-UcAyQWg2bAN647Q+O811tG9MrJ38Z10jjhQdKNAL8fsyPzE3cCN/uT+f55cFVY4aGO4jqJAvmqsuY3GQDwAoXg==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.8.3"
+ }
+ },
"@babel/plugin-syntax-decorators": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz",
@@ -685,9 +704,9 @@
}
},
"@babel/plugin-transform-block-scoping": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz",
- "integrity": "sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.0.tgz",
+ "integrity": "sha512-AoMn0D3nLG9i71useuBrZZTnHbjnhcaTXCckUtOx3JPuhGGJdOUYMwOV9niPJ+nZCk52dfLLqbmV3pBMCRQLNw==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
@@ -720,9 +739,9 @@
}
},
"@babel/plugin-transform-destructuring": {
- "version": "7.9.5",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.9.5.tgz",
- "integrity": "sha512-j3OEsGel8nHL/iusv/mRd5fYZ3DrOxWC82x0ogmdN/vHfAP4MYw+AFKYanzWlktNwikKvlzUV//afBW5FTp17Q==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.0.tgz",
+ "integrity": "sha512-yKoghHpYbC0eM+6o6arPUJT9BQBvOOn8iOCEHwFvkJ5gjAxYmoUaAuLwaoA9h2YvC6dzcRI0KPQOpRXr8qQTxQ==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3"
@@ -768,9 +787,9 @@
}
},
"@babel/plugin-transform-for-of": {
- "version": "7.9.0",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz",
- "integrity": "sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.0.tgz",
+ "integrity": "sha512-0ldl5xEe9kbuhB1cDqs17JiBPEm1+6/LH7loo29+MAJOyB/xbpLI/u6mRzDPjr0nYL7z0S14FPT4hs2gH8Im9Q==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3"
@@ -828,9 +847,9 @@
}
},
"@babel/plugin-transform-modules-systemjs": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.6.tgz",
- "integrity": "sha512-NW5XQuW3N2tTHim8e1b7qGy7s0kZ2OH3m5octc49K1SdAKGxYxeIx7hiIz05kS1R2R+hOWcsr1eYwcGhrdHsrg==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.0.tgz",
+ "integrity": "sha512-L/1xADoyJeb01fqKiHhl4ghAJOnFcHvx2JQA7bc8zdaDFDU4k62CJmXqDtNtJUNiOwlHZLWg1l7/Twf1aWARQw==",
"dev": true,
"requires": {
"@babel/helper-hoist-variables": "^7.8.3",
@@ -948,15 +967,25 @@
}
},
"@babel/plugin-transform-react-jsx-source": {
- "version": "7.9.0",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz",
- "integrity": "sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.0.tgz",
+ "integrity": "sha512-EmUZ2YYXK6YFIdSxUJ1thg7gIBMHSEp8nGS6GwkXGpGdplpmOhj6azYjszT8YcFt6HyPElycDOd2lXckzN+OEw==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.8.3"
}
},
+ "@babel/plugin-transform-react-pure-annotations": {
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.0.tgz",
+ "integrity": "sha512-rn8QOUd0wnJYKGROZ9GYIPBbl/c3aC2tuMh1dmkklrL0l3D5MzXmQBlrsWTizbFnJC16TkEHwSs+a0rEO/hvcQ==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.8.3",
+ "@babel/helper-plugin-utils": "^7.8.3"
+ }
+ },
"@babel/plugin-transform-regenerator": {
"version": "7.8.7",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz",
@@ -1005,9 +1034,9 @@
}
},
"@babel/plugin-transform-spread": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz",
- "integrity": "sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.0.tgz",
+ "integrity": "sha512-P3Zj04ylqumJBjmjylNl05ZHRo4j4gFNG7P70loys0//q5BTe30E8xIj6PnqEWAfsPYu2sdIPcJeeQdclqlM6A==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3"
@@ -1043,16 +1072,25 @@
}
},
"@babel/plugin-transform-typescript": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.6.tgz",
- "integrity": "sha512-8OvsRdvpt3Iesf2qsAn+YdlwAJD7zJ+vhFZmDCa4b8dTp7MmHtKk5FF2mCsGxjZwuwsy/yIIay/nLmxST1ctVQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.10.0.tgz",
+ "integrity": "sha512-BGH4yn+QwYFfzh8ITmChwrcvhLf+jaYBlz+T87CNKTP49SbqrjqTsMqtFijivYWYjcYHvac8II53RYd82vRaAw==",
"dev": true,
"requires": {
- "@babel/helper-create-class-features-plugin": "^7.9.6",
+ "@babel/helper-create-class-features-plugin": "^7.10.0",
"@babel/helper-plugin-utils": "^7.8.3",
"@babel/plugin-syntax-typescript": "^7.8.3"
}
},
+ "@babel/plugin-transform-unicode-escapes": {
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.0.tgz",
+ "integrity": "sha512-6DwSPQzJ9kSRI1kNFfVAeYdeH7sUH0c1NOYSBGnpJ1ZUZ7mxPY1hxeAqzcrO5NKlOx7ghcy4nAbfFWTPx5IVEg==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.8.3"
+ }
+ },
"@babel/plugin-transform-unicode-regex": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz",
@@ -1064,25 +1102,28 @@
}
},
"@babel/preset-env": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.6.tgz",
- "integrity": "sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.0.tgz",
+ "integrity": "sha512-UOZNyiZRvIGvIudjCB8Y8OVkpAvlslec4qgwC73yEvx3Puz0c/xc28Yru36y5K+StOkPPM+VldTsmXPht5LpSg==",
"dev": true,
"requires": {
- "@babel/compat-data": "^7.9.6",
- "@babel/helper-compilation-targets": "^7.9.6",
+ "@babel/compat-data": "^7.10.0",
+ "@babel/helper-compilation-targets": "^7.10.0",
"@babel/helper-module-imports": "^7.8.3",
"@babel/helper-plugin-utils": "^7.8.3",
"@babel/plugin-proposal-async-generator-functions": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-dynamic-import": "^7.8.3",
- "@babel/plugin-proposal-json-strings": "^7.8.3",
+ "@babel/plugin-proposal-json-strings": "^7.10.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"@babel/plugin-proposal-numeric-separator": "^7.8.3",
- "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+ "@babel/plugin-proposal-object-rest-spread": "^7.10.0",
"@babel/plugin-proposal-optional-catch-binding": "^7.8.3",
- "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+ "@babel/plugin-proposal-optional-chaining": "^7.10.0",
+ "@babel/plugin-proposal-private-methods": "^7.8.3",
"@babel/plugin-proposal-unicode-property-regex": "^7.8.3",
"@babel/plugin-syntax-async-generators": "^7.8.0",
+ "@babel/plugin-syntax-class-properties": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.0",
"@babel/plugin-syntax-json-strings": "^7.8.0",
"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
@@ -1094,20 +1135,20 @@
"@babel/plugin-transform-arrow-functions": "^7.8.3",
"@babel/plugin-transform-async-to-generator": "^7.8.3",
"@babel/plugin-transform-block-scoped-functions": "^7.8.3",
- "@babel/plugin-transform-block-scoping": "^7.8.3",
+ "@babel/plugin-transform-block-scoping": "^7.10.0",
"@babel/plugin-transform-classes": "^7.9.5",
"@babel/plugin-transform-computed-properties": "^7.8.3",
- "@babel/plugin-transform-destructuring": "^7.9.5",
+ "@babel/plugin-transform-destructuring": "^7.10.0",
"@babel/plugin-transform-dotall-regex": "^7.8.3",
"@babel/plugin-transform-duplicate-keys": "^7.8.3",
"@babel/plugin-transform-exponentiation-operator": "^7.8.3",
- "@babel/plugin-transform-for-of": "^7.9.0",
+ "@babel/plugin-transform-for-of": "^7.10.0",
"@babel/plugin-transform-function-name": "^7.8.3",
"@babel/plugin-transform-literals": "^7.8.3",
"@babel/plugin-transform-member-expression-literals": "^7.8.3",
"@babel/plugin-transform-modules-amd": "^7.9.6",
"@babel/plugin-transform-modules-commonjs": "^7.9.6",
- "@babel/plugin-transform-modules-systemjs": "^7.9.6",
+ "@babel/plugin-transform-modules-systemjs": "^7.10.0",
"@babel/plugin-transform-modules-umd": "^7.9.0",
"@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
"@babel/plugin-transform-new-target": "^7.8.3",
@@ -1117,14 +1158,15 @@
"@babel/plugin-transform-regenerator": "^7.8.7",
"@babel/plugin-transform-reserved-words": "^7.8.3",
"@babel/plugin-transform-shorthand-properties": "^7.8.3",
- "@babel/plugin-transform-spread": "^7.8.3",
+ "@babel/plugin-transform-spread": "^7.10.0",
"@babel/plugin-transform-sticky-regex": "^7.8.3",
"@babel/plugin-transform-template-literals": "^7.8.3",
"@babel/plugin-transform-typeof-symbol": "^7.8.4",
+ "@babel/plugin-transform-unicode-escapes": "^7.10.0",
"@babel/plugin-transform-unicode-regex": "^7.8.3",
"@babel/preset-modules": "^0.1.3",
- "@babel/types": "^7.9.6",
- "browserslist": "^4.11.1",
+ "@babel/types": "^7.10.0",
+ "browserslist": "^4.12.0",
"core-js-compat": "^3.6.2",
"invariant": "^2.2.2",
"levenary": "^1.1.1",
@@ -1153,9 +1195,9 @@
}
},
"@babel/preset-react": {
- "version": "7.9.4",
- "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.9.4.tgz",
- "integrity": "sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.10.0.tgz",
+ "integrity": "sha512-3bHAfSRGTciFb1c7qlPCeGiL1TErUANc5AmjXE5+9/l6ePyLoCvHPxqdk94PUGwTn6/VOZSDDWtkC1cYsaUUkA==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3",
@@ -1163,7 +1205,8 @@
"@babel/plugin-transform-react-jsx": "^7.9.4",
"@babel/plugin-transform-react-jsx-development": "^7.9.0",
"@babel/plugin-transform-react-jsx-self": "^7.9.0",
- "@babel/plugin-transform-react-jsx-source": "^7.9.0"
+ "@babel/plugin-transform-react-jsx-source": "^7.10.0",
+ "@babel/plugin-transform-react-pure-annotations": "^7.10.0"
}
},
"@babel/preset-typescript": {
@@ -1177,18 +1220,18 @@
}
},
"@babel/runtime": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
- "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.0.tgz",
+ "integrity": "sha512-tgYb3zVApHbLHYOPWtVwg25sBqHhfBXRKeKoTIyoheIxln1nA7oBl7SfHfiTG2GhDPI8EUBkOD/0wJCP/3HN4Q==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.4"
}
},
"@babel/runtime-corejs3": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.9.6.tgz",
- "integrity": "sha512-6toWAfaALQjt3KMZQc6fABqZwUDDuWzz+cAfPhqyEnzxvdWOAkjwPNxgF8xlmo7OWLsSjaKjsskpKHRLaMArOA==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.10.0.tgz",
+ "integrity": "sha512-PB3yRdxniprLsntC6Rm7qIGDb368LWCTNicBXMcTHvrx8MjroYIWkWHng4b7Scbfmn0fDTxiRjiepzw5rDKTFQ==",
"dev": true,
"requires": {
"core-js-pure": "^3.0.0",
@@ -1196,37 +1239,37 @@
}
},
"@babel/template": {
- "version": "7.8.6",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
- "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.0.tgz",
+ "integrity": "sha512-aMLEQn5tcG49LEWrsEwxiRTdaJmvLem3+JMCMSeCy2TILau0IDVyWdm/18ACx7XOCady64FLt6KkHy28tkDQHQ==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.8.3",
- "@babel/parser": "^7.8.6",
- "@babel/types": "^7.8.6"
+ "@babel/parser": "^7.10.0",
+ "@babel/types": "^7.10.0"
}
},
"@babel/traverse": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.6.tgz",
- "integrity": "sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.0.tgz",
+ "integrity": "sha512-NZsFleMaLF1zX3NxbtXI/JCs2RPOdpGru6UBdGsfhdsDsP+kFF+h2QQJnMJglxk0kc69YmMFs4A44OJY0tKo5g==",
"dev": true,
"requires": {
"@babel/code-frame": "^7.8.3",
- "@babel/generator": "^7.9.6",
+ "@babel/generator": "^7.10.0",
"@babel/helper-function-name": "^7.9.5",
"@babel/helper-split-export-declaration": "^7.8.3",
- "@babel/parser": "^7.9.6",
- "@babel/types": "^7.9.6",
+ "@babel/parser": "^7.10.0",
+ "@babel/types": "^7.10.0",
"debug": "^4.1.0",
"globals": "^11.1.0",
"lodash": "^4.17.13"
}
},
"@babel/types": {
- "version": "7.9.6",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.6.tgz",
- "integrity": "sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==",
+ "version": "7.10.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.0.tgz",
+ "integrity": "sha512-t41W8yWFyQFPOAAvPvjyRhejcLGnJTA3iRpFcDbEKwVJ3UnHQePFzLk8GagTsucJlImyNwrGikGsYURrWbQG8w==",
"dev": true,
"requires": {
"@babel/helper-validator-identifier": "^7.9.5",
@@ -2004,9 +2047,9 @@
}
},
"@testing-library/dom": {
- "version": "7.5.8",
- "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.5.8.tgz",
- "integrity": "sha512-aEK4GDeIk3sHuuF8NNvZrmZg5xfF7llvdlVfjely/fPg/GE4yLa0cVZEBWpS6oVUBk2tEXjwTDPFnMOe/M0GTQ==",
+ "version": "7.5.9",
+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.5.9.tgz",
+ "integrity": "sha512-S9Oy0fyusO7FNBJHNq1GwXYsSYMawk6yo8uGd6vB+mL+VdpFPEqpQD1KEFNGtHQoiSCo8+hwk7gnZ9x7af0p/g==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.6",
@@ -2044,9 +2087,9 @@
}
},
"@testing-library/user-event": {
- "version": "10.3.5",
- "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-10.3.5.tgz",
- "integrity": "sha512-9Jg5pg12099EoOb4Z/+UNtCFpFIblD6INkgeWuV/AjUiYP+s/u6aYGPaLrUYioJ8duQ3V421B29GVE/3JELjCQ==",
+ "version": "10.4.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-10.4.0.tgz",
+ "integrity": "sha512-IaWczZ2qO7cLUefEfU7OUBLhpmGVOBEdFe9hEHS3Qu+Wl3JTknD2+XYHLY8oct4O/gA7XP9wXpmCyLVcXRYPqA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.6"
@@ -3388,6 +3431,16 @@
"babel-plugin-transform-react-remove-prop-types": "0.4.24"
},
"dependencies": {
+ "@babel/plugin-proposal-optional-chaining": {
+ "version": "7.9.0",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
+ "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.8.3",
+ "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+ }
+ },
"@babel/preset-env": {
"version": "7.9.0",
"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.0.tgz",
@@ -4052,9 +4105,9 @@
}
},
"caniuse-lite": {
- "version": "1.0.30001065",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001065.tgz",
- "integrity": "sha512-DDxCLgJ266YnAHQv0jS1wdOaihRFF52Zgmlag39sQJVy2H46oROpJp4hITstqhdB8qnHSrKNoAEkQA9L/oYF9A==",
+ "version": "1.0.30001066",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
+ "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==",
"dev": true
},
"capture-exit": {
@@ -5747,9 +5800,9 @@
"dev": true
},
"electron-to-chromium": {
- "version": "1.3.451",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.451.tgz",
- "integrity": "sha512-2fvco0F2bBIgqzO8GRP0Jt/91pdrf9KfZ5FsmkYkjERmIJG585cFeFZV4+CO6oTmU3HmCTgfcZuEa7kW8VUh3A==",
+ "version": "1.3.453",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
+ "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==",
"dev": true
},
"elliptic": {
@@ -11477,9 +11530,9 @@
}
},
"mime": {
- "version": "2.4.5",
- "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",
- "integrity": "sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==",
+ "version": "2.4.6",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+ "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
"dev": true
},
"mime-db": {
@@ -11910,9 +11963,9 @@
}
},
"node-releases": {
- "version": "1.1.56",
- "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.56.tgz",
- "integrity": "sha512-EVo605FhWLygH8a64TjgpjyHYOihkxECwX1bHHr8tETJKWEiWS2YJjPbvsX2jFjnjTNEgBCmk9mLjKG1Mf11cw==",
+ "version": "1.1.57",
+ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
+ "integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw==",
"dev": true
},
"normalize-package-data": {
@@ -12826,9 +12879,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.30",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz",
- "integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==",
+ "version": "7.0.31",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.31.tgz",
+ "integrity": "sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
diff --git a/package.json b/package.json
index 8491b09..b6b9e11 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-shimmer",
- "version": "3.0.3",
+ "version": "3.1.0",
"description": "React Image (Suspense-like) Loader component that simulates a shimmer effect",
"author": "gokcan",
"keywords": [
diff --git a/src/Image.tsx b/src/Image.tsx
index 83463b9..d481891 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -1,6 +1,6 @@
/**
* @class SuspenseImage
- * @version 3.0.3
+ * @version 3.1.0
* @author github.com/gokcan
*/
diff --git a/src/index.ts b/src/index.ts
index 8f9fde5..49450e8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,5 +2,6 @@ export { default } from './Image'
export type { ImageProps } from './Image'
// Loaders
-export { Shimmer } from './loaders/shimmer/Shimmer'
+export * from './loaders'
export type { ShimmerProps } from './loaders/shimmer/Shimmer'
+export type { BreathingProps } from './loaders/breathing/Breathing'
diff --git a/src/loaders/breathing/Breathing.tsx b/src/loaders/breathing/Breathing.tsx
new file mode 100644
index 0000000..ab3db16
--- /dev/null
+++ b/src/loaders/breathing/Breathing.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import clsx from 'clsx'
+
+import './styles.css'
+
+export interface BreathingProps {
+ className?: string
+ duration?: number
+ height?: number
+ width?: number
+}
+
+const DEFAULT_DURATION_MS = 1000
+
+export const Breathing = ({ className, duration = DEFAULT_DURATION_MS, height, width }: BreathingProps) => {
+ const style = { height, width, animationDuration: `${(duration / 1000).toFixed(1)}s` }
+ return
+}
+
+Breathing.propTypes = {
+ className: PropTypes.string,
+ duration: PropTypes.number,
+ height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}
diff --git a/src/loaders/breathing/README.md b/src/loaders/breathing/README.md
new file mode 100644
index 0000000..1ac1204
--- /dev/null
+++ b/src/loaders/breathing/README.md
@@ -0,0 +1,48 @@
+### Breathing Loader
+
+## Usage
+
+```jsx
+import React from 'react'
+import Image, { Breathing } from 'react-shimmer'
+
+function App(props) {
+ return (
+
+ }
+ />
+
+ )
+}
+```
+
+or as a standalone placeholder:
+
+```jsx
+import React from 'react'
+import { Breathing } from 'react-shimmer'
+
+function App(props) {
+ return (
+
+
+
+ )
+}
+```
+
+### Properties
+
+Property | Type | Required | Default value | Description
+:--- | :--- | :--- | :--- | :---
+`className`|string|no|| Override default styles with className
+`width`|number|no||
+`height`|number|no||
+`duration`|number|no|`1000`| Animation duration (ms)
+-----
+
+## License
+
+MIT © [gokcan](https://github.com/gokcan)
diff --git a/src/loaders/breathing/styles.css b/src/loaders/breathing/styles.css
new file mode 100644
index 0000000..bf5af90
--- /dev/null
+++ b/src/loaders/breathing/styles.css
@@ -0,0 +1,19 @@
+:root {
+ --default-bg-color: #e1e2e4;
+}
+
+.breathing {
+ width: 100%;
+ height: 100%;
+ background: var(--default-bg-color);
+ animation: breathing ease-in-out infinite alternate;
+}
+
+@keyframes breathing {
+ from {
+ opacity: 0.25;
+ }
+ to {
+ opacity: 1;
+ }
+}
diff --git a/src/loaders/index.ts b/src/loaders/index.ts
index cdcf750..dc160fd 100644
--- a/src/loaders/index.ts
+++ b/src/loaders/index.ts
@@ -1 +1,2 @@
export { Shimmer } from './shimmer/Shimmer'
+export { Breathing } from './breathing/Breathing'
diff --git a/src/loaders/shimmer/README.md b/src/loaders/shimmer/README.md
index d28ce6a..23299d0 100644
--- a/src/loaders/shimmer/README.md
+++ b/src/loaders/shimmer/README.md
@@ -18,13 +18,28 @@ function App(props) {
}
```
+or as a standalone placeholder:
+
+```jsx
+import React from 'react'
+import { Shimmer } from 'react-shimmer'
+
+function App(props) {
+ return (
+
+
+
+ )
+}
+```
+
### Properties
Property | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
`width`|number|yes||
`height`|number|yes||
-`color`|string|no|`#f6f7f8`| Background color of the loader
+`className`|string|no|| Override default styles with className
`duration`|number|no|`1600`| Animation duration (ms)
-----
diff --git a/src/loaders/shimmer/Shimmer.tsx b/src/loaders/shimmer/Shimmer.tsx
index f4a1a7c..5f15134 100644
--- a/src/loaders/shimmer/Shimmer.tsx
+++ b/src/loaders/shimmer/Shimmer.tsx
@@ -24,7 +24,7 @@ export const Shimmer = ({ className, duration, height = DEFAULT_HEIGHT, width =
const shimmerStyle = calcShimmerStyle(width, height, duration)
const style = { ...shimmerStyle, ...{ height, width } }
- return
+ return
}
Shimmer.propTypes = {
diff --git a/src/loaders/shimmer/styles.css b/src/loaders/shimmer/styles.css
index 270b4a6..5906d09 100644
--- a/src/loaders/shimmer/styles.css
+++ b/src/loaders/shimmer/styles.css
@@ -1,21 +1,31 @@
+:root {
+ --default-bg-color: #f6f7f8;
+ --default-bg-moving-gradient: linear-gradient(to right, rgb(238, 238, 238) 8%, rgb(222, 222, 222) 18%, rgb(238, 238, 238) 33%);
+}
+
.shimmer {
- background: #f6f7f8;
- background-image: linear-gradient(to right, rgb(238, 238, 238) 8%, rgb(222, 222, 222) 18%, rgb(238, 238, 238) 33%);
+ background: var(--default-bg-color);
+ background-image: var(--default-bg-moving-gradient);
background-repeat: no-repeat;
- animation: shimmering 1.6s forwards infinite ease-in-out, fadein 0.02s forwards;
+ animation: shimmering forwards infinite ease-in-out, fadein 0.02s forwards;
}
@keyframes fadein {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
}
@keyframes shimmering {
- 0% {
+ from {
background-position: top right;
}
- 100% {
+ to {
background-position: top left;
}
}