diff --git a/README.md b/README.md index cdf63fe..78e9d92 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ The full list of loading indicator class names are shown below. To see them in a | .inner-circles-loader | A filling circle with other circles | | .pong-loader | Retro tennis-like game simulation from the 70s. | | .pulse-loader | A pulsing circle. Shrinking and enlarging. | +| .prismatic-loader | Prismatic's website loader animation | Customize with Sass diff --git a/examples.html b/examples.html index 03b8e4c..ae89d08 100644 --- a/examples.html +++ b/examples.html @@ -137,7 +137,7 @@ Loading… - +
Loading… @@ -156,6 +156,12 @@
+
+
+ Loading… +
+
+ diff --git a/sass/spinner/prismatic.scss b/sass/spinner/prismatic.scss new file mode 100644 index 0000000..206203d --- /dev/null +++ b/sass/spinner/prismatic.scss @@ -0,0 +1,38 @@ +@import "compass/css3"; + +$background-color: #ddd !default; +$border: 5px solid #fff !default; +$element-width: 50px !default; +$element-height: 50px !default; +$prismatic-loader-speed: 1s !default; + +.prismatic-loader:not(:required) { + width: $element-width; + height: $element-height; + @include border-radius(50%); + background: $background-color; + display: inline-block; + position: relative; + overflow: hidden; + text-indent: -99999px; + + &:before { + content: ""; + display: block; + width: 0; + height: 0; + background: $background-color; + border: $border; + @include border-radius(50%); + position: absolute; + top: 50%; + left: 50%; + @include transform(translate3d(-50%, -50%, 0)); + @include animation(prismatic-loader $prismatic-loader-speed infinite); + } +} + +@include keyframes(prismatic-loader) { + from { width: 0; height: 0; } + to { height: 100%; width: 100%; } +} \ No newline at end of file diff --git a/sass/spinners.scss b/sass/spinners.scss index 4ae85db..2daad47 100644 --- a/sass/spinners.scss +++ b/sass/spinners.scss @@ -17,3 +17,4 @@ @import "spinner/inner-circles"; @import "spinner/pong"; @import "spinner/pulse"; +@import "spinner/prismatic"; \ No newline at end of file