Add support for top-down gradient animation

[moQuez]

Adding gradientDirection prop which translates into a rotate transformation applied to the
linearGradient SVG element. Providing the option to animate either from left to right or top to
bottom.

fix #255

Summary

This is related to #255. I was browsing for Hactoberfest tagged issues and this one seemed quite interesting. Plus, I love what you've created here, so I'm glad to contribute.

Related Issue #255

Any Breaking Changes

No breaking changes :)

Checklist

• Are all the test cases passing?
• If any new feature has been added, then are the test cases updated/added?
• Has the documentation been updated for the proposed change, if required?

Demo

[moQuez]

hopefully this is what you were looking for @vlkpa

[moQuez]

@danilowoz are you able to review this before October ends?

Thanks!

[danilowoz]

Sorry for the later answer, it looks good to me!

[github-actions]

🎉 This PR is included in version 6.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Sovai]

is there an option to rotate the background animation to 45 degrees?

[danilowoz]

Not really. I tried to implement it first, but it turned out it was pretty challenging, and all animations looked inconsistent. But I'd encourage you to take a look at this, maybe a new pair of eyes might help it.

[Sovai]

I can get it working by adding gradientTransform="rotate(45)" and changing x2 value in <linearGradient> tag as you can see in the code below

<svg viewBox="0 0 344 296" version="1.1" preserveAspectRatio="xMidYMid meet"><rect clip-path="url(#skeleton-transaction-path)" x="0" y="0" width="100%" height="100%" style="fill:url('#skeleton-transaction-animation');"></rect><defs><clipPath id="skeleton-transaction-path"><path d="M0 24C0 13.676 0 8.51398 2.76661 4.98265C3.41323 4.15731 4.15731 3.41323 4.98265 2.76661C8.51398 0 13.676 0 24 0C34.324 0 39.486 0 43.0173 2.76661C43.8427 3.41323 44.5868 4.15731 45.2334 4.98265C48 8.51398 48 13.676 48 24C48 34.324 48 39.486 45.2334 43.0173C44.5868 43.8427 43.8427 44.5868 43.0173 45.2334C39.486 48 34.324 48 24 48C13.676 48 8.51398 48 4.98265 45.2334C4.15731 44.5868 3.41323 43.8427 2.76661 43.0173C0 39.486 0 34.324 0 24ZM2.76661 66.9827C0 70.514 0 75.676 0 86C0 96.324 0 101.486 2.76661 105.017C3.41323 105.843 4.15731 106.587 4.98265 107.233C8.51398 110 13.676 110 24 110C34.324 110 39.486 110 43.0173 107.233C43.8427 106.587 44.5868 105.843 45.2334 105.017C48 101.486 48 96.324 48 86C48 75.676 48 70.514 45.2334 66.9827C44.5868 66.1573 43.8427 65.4132 43.0173 64.7666C39.486 62 34.324 62 24 62C13.676 62 8.51398 62 4.98265 64.7666C4.15731 65.4132 3.41323 66.1573 2.76661 66.9827ZM2.76661 128.983C0 132.514 0 137.676 0 148C0 158.324 0 163.486 2.76661 167.017C3.41323 167.843 4.15731 168.587 4.98265 169.233C8.51398 172 13.676 172 24 172C34.324 172 39.486 172 43.0173 169.233C43.8427 168.587 44.5868 167.843 45.2334 167.017C48 163.486 48 158.324 48 148C48 137.676 48 132.514 45.2334 128.983C44.5868 128.157 43.8427 127.413 43.0173 126.767C39.486 124 34.324 124 24 124C13.676 124 8.51398 124 4.98265 126.767C4.15731 127.413 3.41323 128.157 2.76661 128.983ZM69.25 151C66.3505 151 64 153.351 64 156.25C64 159.149 66.3505 161.5 69.25 161.5H125.75C128.649 161.5 131 159.149 131 156.25C131 153.351 128.649 151 125.75 151H69.25ZM64 136.562C64 132.938 66.9381 130 70.5625 130H206.438C210.062 130 213 132.938 213 136.562C213 140.187 210.062 143.125 206.438 143.125H70.5625C66.9381 143.125 64 140.187 64 136.562ZM343 178H64V179H343V178ZM270 147C270 143.134 273.134 140 277 140H337C340.866 140 344 143.134 344 147C344 150.866 340.866 154 337 154H277C273.134 154 270 150.866 270 147ZM2.76661 252.983C0 256.514 0 261.676 0 272C0 282.324 0 287.486 2.76661 291.017C3.41323 291.843 4.15731 292.587 4.98265 293.233C8.51398 296 13.676 296 24 296C34.324 296 39.486 296 43.0173 293.233C43.8427 292.587 44.5868 291.843 45.2334 291.017C48 287.486 48 282.324 48 272C48 261.676 48 256.514 45.2334 252.983C44.5868 252.157 43.8427 251.413 43.0173 250.767C39.486 248 34.324 248 24 248C13.676 248 8.51398 248 4.98265 250.767C4.15731 251.413 3.41323 252.157 2.76661 252.983ZM64 280.25C64 277.35 66.3505 275 69.25 275H95.75C98.6495 275 101 277.35 101 280.25C101 283.15 98.6495 285.5 95.75 285.5H69.25C66.3505 285.5 64 283.15 64 280.25ZM70.5625 254C66.9381 254 64 256.938 64 260.562C64 264.187 66.9381 267.125 70.5625 267.125H206.438C210.062 267.125 213 264.187 213 260.562C213 256.938 210.062 254 206.438 254H70.5625ZM279 271C279 267.134 282.134 264 286 264H337C340.866 264 344 267.134 344 271C344 274.866 340.866 278 337 278H286C282.134 278 279 274.866 279 271ZM64 94.25C64 91.3505 66.3505 89 69.25 89H98.75C101.649 89 104 91.3505 104 94.25C104 97.1495 101.649 99.5 98.75 99.5H69.25C66.3505 99.5 64 97.1495 64 94.25ZM70.5625 68C66.9381 68 64 70.9381 64 74.5625C64 78.1869 66.9381 81.125 70.5625 81.125H206.438C210.062 81.125 213 78.1869 213 74.5625C213 70.9381 210.062 68 206.438 68H70.5625ZM64 116H343V117H64V116ZM277 78C273.134 78 270 81.134 270 85C270 88.866 273.134 92 277 92H337C340.866 92 344 88.866 344 85C344 81.134 340.866 78 337 78H277ZM69.25 27C66.3505 27 64 29.3505 64 32.25C64 35.1495 66.3505 37.5 69.25 37.5H111.75C114.649 37.5 117 35.1495 117 32.25C117 29.3505 114.649 27 111.75 27H69.25ZM64 12.5625C64 8.93813 66.9381 6 70.5625 6H206.438C210.062 6 213 8.93813 213 12.5625C213 16.1869 210.062 19.125 206.438 19.125H70.5625C66.9381 19.125 64 16.1869 64 12.5625ZM343 54H64V55H343V54ZM261 23C261 19.134 264.134 16 268 16H337C340.866 16 344 19.134 344 23C344 26.866 340.866 30 337 30H268C264.134 30 261 26.866 261 23ZM2.76661 190.983C0 194.514 0 199.676 0 210C0 220.324 0 225.486 2.76661 229.017C3.41323 229.843 4.15731 230.587 4.98265 231.233C8.51398 234 13.676 234 24 234C34.324 234 39.486 234 43.0173 231.233C43.8427 230.587 44.5868 229.843 45.2334 229.017C48 225.486 48 220.324 48 210C48 199.676 48 194.514 45.2334 190.983C44.5868 190.157 43.8427 189.413 43.0173 188.767C39.486 186 34.324 186 24 186C13.676 186 8.51398 186 4.98265 188.767C4.15731 189.413 3.41323 190.157 2.76661 190.983ZM64 218.25C64 215.351 66.3505 213 69.25 213H137.75C140.649 213 143 215.351 143 218.25C143 221.149 140.649 223.5 137.75 223.5H69.25C66.3505 223.5 64 221.149 64 218.25ZM70.5625 192C66.9381 192 64 194.938 64 198.562C64 202.187 66.9381 205.125 70.5625 205.125H206.438C210.062 205.125 213 202.187 213 198.562C213 194.938 210.062 192 206.438 192H70.5625ZM64 240H343V241H64V240ZM287 202C283.134 202 280 205.134 280 209C280 212.866 283.134 216 287 216H337C340.866 216 344 212.866 344 209C344 205.134 340.866 202 337 202H287Z" fill="#EFEFF3"></path></clipPath><linearGradient id="skeleton-transaction-animation" gradientTransform="rotate(45)" x2="140%"><stop offset="0%" stop-color="rgba(239, 239, 243, 1)" stop-opacity="1"><animate attributeName="offset" values="-2; 1" dur="1.5s" repeatCount="indefinite"></animate></stop><stop offset="50%" stop-color="rgba(217, 216, 222, 1)" stop-opacity="1"><animate attributeName="offset" values="-1.5; 1.5" dur="1.5s" repeatCount="indefinite"></animate></stop><stop offset="100%" stop-color="rgba(239, 239, 243, 1)" stop-opacity="1"><animate attributeName="offset" values="-1; 2" dur="1.5s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>

[danilowoz]

Interesting, what about values like 90, -90, -45?
Please, create a codesandbox.io instead of posting a long snippet of code, a sandbox is way easier to collaborate and debug.