Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update README.md #1

Merged
merged 1 commit into from

2 participants

@DiegoLopesLima

Changed the table to better organization and highlighted the codes to better understanding.

@tomgenoni tomgenoni merged commit 0eb4d3f into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 30, 2013
  1. @DiegoLopesLima

    Update README.md

    DiegoLopesLima authored
This page is out of date. Refresh to see the latest.
Showing with 77 additions and 22 deletions.
  1. +77 −22 README.md
View
99 README.md
@@ -20,40 +20,95 @@ 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?
-You can use the CSS that the Sass generates in `stylesheets/main.scss` and make edits to the parameters described above.
+You can use the CSS that the Sass generates in `stylesheets/main.scss` and make edits to the parameters described above.
Something went wrong with that request. Please try again.