animated dots loader

src/pages/_docs/spinners.md

@@ -60,7 +60,7 @@ Growing spinners also come in a variety of colors to choose from.
 {% include example.html code=code %}
 
 
-## Buttons
+### Button with spinner
 
 Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.  
 
@@ -68,7 +68,20 @@ Use buttons with spinners to notify users that an action they have taken by clic
 {% include ui/button.html spinner=true text="Button" color="primary" %}
 {% include ui/button.html spinner=true text="Button" color="danger" %}
 {% include ui/button.html spinner=true text="Button" color="warning" %}
-{% include ui/button.html spinner=true color="success" %}
-{% include ui/button.html spinner=true color="white" %}
+{% include ui/button.html spinner=true text="Button" color="success" %}
+{% include ui/button.html spinner=true text="Button" color="white" %}
 {% endcapture %}
 {% include example.html code=code %}
+
+## Animated dots
+
+{% capture code %}
+<h1>Loading<span class="animated-dots"></span></h1>
+{% endcapture %}
+{% include example.html code=code wrapper="text-center" %}
+
+{% capture code %}
+{% include ui/button.html dots=true text='Loading' color="primary" %}
+{% include ui/button.html dots=true text='Loading' disabled=true color="primary" %}
+{% endcapture %}
+{% include example.html code=code %}
\ No newline at end of file

src/pages/_includes/ui/button.html

@@ -24,7 +24,7 @@
 {% include ui/spinner.html color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include ui/icon.html icon=include.icon use-svg=true color=include.icon-color %}{% endif %}
 {% unless include.icon-only %}
-{{ include.text | default: "Button" }}
+{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
 {% if include.icon-right %}{% include ui/icon.html icon=include.icon-right use-svg=true class="icon-right" %}{% endif %}
 {% endunless %}
 </{{ e }}>

src/scss/ui/_loaders.scss

@@ -61,3 +61,22 @@ Dimmer
     }
   }
 }
+
+
+@keyframes animated-dots {
+  0% {
+    transform: translateX(-100%);
+  }
+}
+
+.animated-dots {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  &:after {
+    display: inline-block;
+    content: "...";
+    animation: animated-dots 1.2s steps(4, jump-none) infinite;
+  }
+}
\ No newline at end of file