Skip to content
This repository has been archived by the owner on Feb 11, 2023. It is now read-only.

Commit

Permalink
Adding some examples into index.html.
Browse files Browse the repository at this point in the history
  • Loading branch information
Tom Genoni committed Jan 27, 2013
1 parent 446730b commit 0bf29a9
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 73 deletions.
42 changes: 35 additions & 7 deletions index.html
View file
Expand Up @@ -3,18 +3,46 @@
<head>
<meta charset="utf-8" />
<link media="screen" type="text/css" href="stylesheets/main.css" rel="stylesheet" />
<style>
body {
margin: 100px;
}
</style>
</head>
<body>

<div class="ui-spinner">
<span class="side side-left">
<em class="fill"></em>
</span>
<span class="side side-right">
<em class="fill"></em>
</span>
<div class="example-default">
<div class="ui-spinner">
<span class="side side-left">
<em class="fill"></em>
</span>
<span class="side side-right">
<em class="fill"></em>
</span>
</div>
</div>

<div class="example-ring">
<div class="ui-spinner">
<span class="side side-left">
<em class="fill"></em>
</span>
<span class="side side-right">
<em class="fill"></em>
</span>
</div>
</div>

<div class="example-large">
<div class="ui-spinner">
<span class="side side-left">
<em class="fill"></em>
</span>
<span class="side side-right">
<em class="fill"></em>
</span>
</div>
</div>

</body>
</html>
45 changes: 23 additions & 22 deletions sass/_spinner.scss
View file
@@ -1,49 +1,50 @@
// # CSS Spinner
// Optional 6 params: opacity and spin duration, defaults to values below.
// Optional 6 parameters for mixin 'ui-spinner'.
// Defaults are as follows.

$default-ring-color: transparent;
$default-size: 46px;
$default-bkg-color-1: #ddd;
$default-bkg-color-2: #3c76ca;
$default-bkg-color-light: #ddd;
$default-bkg-color-dark: #3c76ca;
$default-opacity: .8;
$default-duration: 3s;

// Need to remove the units to do some math.
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}

@mixin ui-spinner(
$ring: false,
$ring-color: $default-ring-color,
$size: $default-size,
$bkg-color-1: $default-bkg-color-1,
$bkg-color-2: $default-bkg-color-2,
$bkg-color-light: $default-bkg-color-light,
$bkg-color-dark: $default-bkg-color-dark,
$opacity: $default-opacity,
$duration: $default-duration
) {
.ui-spinner {
width: $size;
height: $size;
background: $bkg-color-1;
background: $bkg-color-light;
opacity: $opacity;

.side .fill {
background: $bkg-color-2;
background: $bkg-color-dark;
@include experimental(animation-duration, $duration);
}

@if $ring {
&:after {
$ring-size: round((strip-units($size)*.6)) + px;
$ring-position: round((strip-units($size)*.2)) + px;
content: "";
background: $ring;
position: absolute;
width: $ring-size;
height: $ring-size;
border-radius: 50%;
top: $ring-position;
left: $ring-position;
display: block;
}
&:after {
$ring-size: round((strip-units($size)*.6)) + px;
$ring-position: round((strip-units($size)*.2)) + px;
content: "";
background: $ring-color;
position: absolute;
width: $ring-size;
height: $ring-size;
border-radius: 50%;
top: $ring-position;
left: $ring-position;
display: block;
}
}
}
Expand Down
13 changes: 12 additions & 1 deletion sass/main.scss
View file
@@ -1,3 +1,14 @@
@import "compass/css3/transition";
@import 'spinner';
@include ui-spinner(#fff);

.example-default {
@include ui-spinner;
}

.example-ring {
@include ui-spinner(#fff);
}

.example-large {
@include ui-spinner(transparent,100px,gray,purple,1,5s);
}

0 comments on commit 0bf29a9

Please sign in to comment.