feat(loader-bar): create loader-bar - FE-4119

[rdzielakpgs]

Proposed behaviour

A new animated version has been added to the Loaders: the loader bar (May 19). This new variant is used in File inputs component (new component coming soon).

User Story
As a user uploading a file to the system (new component to come soon)
I want to have a visual indicator
so that I know that uploading the file is still in progress.

Acceptance Criteria

As a developer using Carbon I should be able to add a Loader bar into my product that matches the DS spec,
It respects the theme selected,
all variations and states described on the DS spec are available.
It aligns with the other Carbon components - margins, test coverage, ...
We refer to Loaders v 0.2.0. This version should be implemented.
Storybook MDX updated with a compatibility table showing which version of the Design System is implemented

Current behaviour

There is no loader-bar component available

Checklist

• Commits follow our style guide
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Cypress automation tests added or updated if required
• Storybook added or updated if required
• Typescript d.ts file added or updated if required
• Carbon implementation and Design System documentation are congruent

Additional context

Testing instructions

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9bc55e8:

Sandbox	Source
carbon-quickstart	Configuration

[edleeks87]

@rdzielakpgs just the missing ; to add in, happy to approve once it is 😄

[cypress]

---

Test summary

1265 • 0 • 3 • 0 • 0

---

Run details

Project	carbon
Status	Passed
Commit	9bc55e8
Started	Sep 13, 2021 8:31 AM
Ended	Sep 13, 2021 8:35 AM
Duration	04:51 💡
OS	Linux Debian - 10.9
Browser	Chrome 91

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[harpalsingh]

After speaking with @DlgSHi and reviewing margins applied with no provided guidance, it is best if we keep small as it is at 6px, but update medium and large to use right margin 8px, so that it follows our formula and the fact pulse effect on loader limits squares coming close together.

[carbonci]

🎉 This PR is included in version 84.5.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀