Permalink
Browse files

feat(loading spinner): loading spinner examples and basic styling

  • Loading branch information...
Freihofner, Katrin Freihofner, Katrin
Freihofner, Katrin authored and Freihofner, Katrin committed Feb 7, 2017
1 parent 7ba95a7 commit 1d4434e8d16da3bffedc48eb815a7313b9eb6685
View
@@ -110,3 +110,5 @@ $buttoncolor: $turquoise-600;
$buttonhovercolor: $turquoise-700;
$buttonactivecolor: $turquoise-800;
$disabledcolor: $gray-300;
$logolime: #b4dc00;
View
@@ -0,0 +1,43 @@
---
layout: components_icons.hbs
meta:
title: "Loading distractor"
description: "A loading distractor for Dynatrace styled web entities with css and markup examples."
keywords: "loading, distractor, spinner, Dynatrace, groundhog, css component"
---
## Introduction
The Groundhog **loading distractor** is an element, representing a saving or loading action. I can be combined with text. The small version of the loading distractor can be used for indicating saving of input fields and loading in buttons.
## Button versions
The Groundhog loading distractor appears in a two versions:
* Standard loading distractor `loading`
* Loading distractor for input fields and buttons `loading--small`
## Including a button
1. To include a Groundhog loading distractor add the `<svg>` element with a `<circle>`. Include the necessary text content.
```html
<svg>
<circle></circle>
</svg>
```
2. Add the necessary Groundhog classes to the elements class attribute.
```html
<svg class="loading">
<circle class="loading__path"></circle>
</svg>
```
3. The loading distractor is ready to use
## Available classes for button
| class name | effect |
|------------|--------|
| `.loading` | Base class for the loading distractor |
| `.loading--small` | Small version of loading distractor for input fields and buttons |
View
@@ -0,0 +1,82 @@
@import "../common/variables";
$offset: 26*3.1416; //r(-gap)*2*3.14
$duration: 1.7s;
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
.loading {
position: relative;
display: inline-block;
box-sizing: border-box;
padding: 0;
margin: 0;
stroke-width: 4px;
stroke: $logolime;
fill: none;
animation: spin 3.4s linear infinite;
}
.loading--small {
stroke: $gray-500;
}
.loading__path {
stroke-dasharray: $offset;
transform-origin: center;
animation: dash $duration $ease-in-out infinite;
}
.loading__text {
font-family: $mainfont;
font-weight: 300;
color: $logolime;
margin-bottom: 16px;
margin-left: 8px;
position: relative;
display: inline-block;
box-sizing: border-box;
text-decoration: none;
font-size: 18px;
line-height: 24px;
line-height: -moz-block-height;
vertical-align: middle;
}
.loading__box {
text-align: center;
display: inline-block;
height: 50px;
background-color: rgba(25, 25, 25, 0.65);
border-radius: 3px;
padding: 10px 28px 10px 28px;
overflow: hidden;
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: $offset;
transform: rotate(90deg);
}
50% {
stroke-dashoffset: $offset/4;
transform: rotate(100deg);
}
100% {
stroke-dashoffset: $offset;
transform: rotate(450deg);
}
}
@@ -0,0 +1,3 @@
<svg class="loading loading--small" width="15px" height="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<circle class="loading__path" cx="15" cy="15" r="12"></circle>
</svg>
@@ -0,0 +1,3 @@
<svg class="loading" width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<circle class="loading__path" cx="15" cy="15" r="12"></circle>
</svg>
@@ -0,0 +1,6 @@
<div class="loading__box">
<svg class="loading" width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<circle class="loading__path" cx="15" cy="15" r="12"></circle>
</svg>
<p class="loading__text">Loading...</p>
</div>
View
@@ -33,6 +33,7 @@
@import "tabs/tabs";
@import "slider/slider";
@import "select/select";
@import "loading/loading";
/** Trumps **/
@import "trumps/hide-mq";

0 comments on commit 1d4434e

Please sign in to comment.