Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #1 from DiegoLopesLima/patch-1

Update README.md
  • Loading branch information...
commit 0eb4d3f23062dff03a76625efd02bc1c2c13afab 2 parents 149c86c + fe9c549
@tomgenoni authored
Showing with 76 additions and 21 deletions.
  1. +76 −21 README.md
View
97 README.md
@@ -21,39 +21,94 @@ A standard 32x32 animated gif throbber is provided as a fallback for older versi
1. For Sass users add the `_ui-spinner.scss` into your project.
2. If you want IE < 10 support also add the `spinner-old-ie.scss` and the throbber.gif. You can include it with an IE conditional tag. See the example in `index.html`.
- <!--[if IE]><link media="screen" type="text/css" href="stylesheets/spinner-old-ie.css" rel="stylesheet" /><![endif]-->
+```html
+<!--[if IE]>
+ <link media="screen" type="text/css" href="stylesheets/spinner-old-ie.css" rel="stylesheet" />
+<![endif]-->
+```
3. In our project Sass use the `ui-spinner` mixin with defaults or pass in any arguments. Also see the mixin examples in `example.scss`.
- @include ui-spinner; // Will use defaults.
- @include ui-spinner(#fff, 60px, gray, purple, .7, 4s); // Will use these variables.
+```scss
+@include ui-spinner; // Will use defaults.
+@include ui-spinner(#fff, 60px, gray, purple, .7, 4s); // Will use these variables.
+```
4. Use with the following HTML. Also see the HTML examples in `index.html`.
- <div class="ui-spinner">
- <span class="side side-left">
- <span class="fill"></span>
- </span>
- <span class="side side-right">
- <span class="fill"></span>
- </span>
- </div>
-
+```html
+<div class="ui-spinner">
+ <span class="side side-left">
+ <span class="fill"></span>
+ </span>
+ <span class="side side-right">
+ <span class="fill"></span>
+ </span>
+</div>
+```
### The 6 Optional Parameters
-| Parameter | Description | Defaults |
-| ------------- |-------------| ----- |
-| Hole color* | Color of the hole to fake a ring | transparent |
-| Size | Size of the spinner | 46px |
-| Background color light | First color, specify a lighter of the two colors | #ddd |
-| Background color dark | Second color, specify the darker of the two colors | #3c76ca |
-| Opacity | The opacity of the spinner | .8 |
-| Duration | Speed of the spinner | 3s |
+<table>
+ <tr>
+ <th>Parameter</th>
+
+ <th>Description</th>
+
+ <th>Defaults</th>
+ </tr>
+
+ <tr>
+ <td>Hole color*</td>
+
+ <td>Color of the hole to fake a ring</td>
+
+ <td>transparent</td>
+ </tr>
+
+ <tr>
+ <td>Size</td>
+
+ <td>Size of the spinner</td>
+
+ <td>46px</td>
+ </tr>
+
+ <tr>
+ <td>Background color light</td>
+
+ <td>First color, specify a lighter of the two colors</td>
+
+ <td>#ddd</td>
+ </tr>
+
+ <tr>
+ <td>Background color dark</td>
+
+ <td>Second color, specify the darker of the two colors</td>
+
+ <td>#3c76ca</td>
+ </tr>
+
+ <tr>
+ <td>Opacity</td>
+
+ <td>The opacity of the spinner</td>
+
+ <td>.8</td>
+ </tr>
+
+ <tr>
+ <td>Duration</td>
+
+ <td>Speed of the spinner</td>
-*The hole color is just to fake a ring spinner. You have to match the color you pass into the mixin to the background-color that the spinner will appear against.
+ <td>3s</td>
+ </tr>
+</table>
+* The hole color is just to fake a ring spinner. You have to match the color you pass into the mixin to the background-color that the spinner will appear against.
## Don't Use Sass?
Please sign in to comment.
Something went wrong with that request. Please try again.