Merge pull request #974 from primer/loaders

Add Animated Ellipsis

docs/content/components/loaders.md

@@ -0,0 +1,26 @@
+---
+title: Loaders
+path: components/loaders
+status: New
+source: 'https://github.com/primer/css/tree/master/src/loaders'
+bundle: loaders
+---
+
+Loaders inform users that an action is still in progress and might take a while to complete.
+
+## Animated Ellipsis
+
+Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
+
+```html live
+<span>Loading</span><span class="AnimatedEllipsis"></span>
+```
+
+It can also be used in combination with other components.
+
+```html live
+<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
+<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
+<button class="btn mt-3" disabled><span>Loading</span><span class="AnimatedEllipsis"></span></button>
+```

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -89,6 +89,8 @@
       url: /components/header
     - title: Labels
       url: /components/labels
+    - title: Loaders
+      url: /components/loaders
     - title: Markdown
       url: /components/markdown
     - title: Marketing buttons

src/loaders/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "loaders"
+generated: true
+---
+
+# Primer CSS: `loaders` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/loaders/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/loaders.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss

src/loaders/index.scss

@@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./loaders.scss";

src/loaders/loaders.scss

@@ -0,0 +1,19 @@
+// Loaders
+
+// Animated Ellipsis
+
+.AnimatedEllipsis {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &::after {
+    display: inline-block;
+    content: "...";
+    animation: AnimatedEllipsis-keyframes 1.2s steps(4, jump-none) infinite;
+  }
+
+  @keyframes AnimatedEllipsis-keyframes {
+    0% { transform: translateX(-100%); }
+  }
+}

src/product/index.scss

@@ -16,6 +16,7 @@
 @import "../dropdown/index.scss";
 @import "../header/index.scss";
 @import "../labels/index.scss";
+@import "../loaders/index.scss";
 @import "../markdown/index.scss";
 @import "../popover/index.scss";
 @import "../progress/index.scss";