Skip to content

Instantly share code, notes, and snippets.

@magalhini

magalhini/SassMeister-input-HTML.html

Last active August 29, 2015 14:25
Show Gist options
  • Save magalhini/4f87041acc17f0ad2c4c to your computer and use it in GitHub Desktop.
Save magalhini/4f87041acc17f0ad2c4c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="logo">
<svg width="81px" height="81px" viewBox="0 0 81 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="logo" sketch:type="MSLayerGroup" fill="#0AB3C4">
<path d="M62.4,7.4 C66,7.4 68.9,10.3 68.9,13.9 C68.9,16 68.6,49.7 71.9,71.7 C53,69.1 21.5,68.9 14.4,68.9 L13.9,68.9 C10.3,68.9 7.4,66 7.4,62.4 L7.4,13.9 C7.4,10.3 10.3,7.4 13.9,7.4 L62.4,7.4 L62.4,7.4 Z M62.4,0 L13.9,0 C6.2,0 0,6.2 0,13.9 L0,62.4 C0,70.1 6.2,76.3 13.9,76.3 L14.4,76.3 C19.7,76.3 63.8,76.4 78.7,80.5 C78.8,80.5 79,80.6 79.1,80.6 C80.1,80.6 80.9,79.6 80.6,78.6 C75.8,58.8 76.2,13.9 76.2,13.9 C76.3,6.2 70.1,0 62.4,0 L62.4,0 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
<div class="logo-bars">
<span class="logo-bar one"></span>
<span class="logo-bar two"></span>
<span class="logo-bar three"></span>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@import "compass/css3/";
$scale: 2;
$bar-color: #0AB3C4;
$bar-height: 1;
$bar-total: 3;
$bar-width: $bar-height * 5;
$transition: cubic-bezier(0.645, 0.045, 0.355, 1.000);
svg {
@include transform(scale($scale));
}
.logo {
position: absolute;
top: 3em;
left: 5em;
}
.logo-bars {
@include transform(scale($scale / 2));
position: absolute;
top: 0;
left: -$scale/3 * 1em;
}
.logo-bar {
@include transform-origin(0, 0);
background: $bar-color;
width: $bar-height * 5em;
height: $bar-height * 1em;
display: block;
position: relative;
margin-bottom: $bar-height / 1.5 * 1em;
@for $i from 1 to 4 {
&:nth-of-type(#{$i}) {
@include keyframes(loading-#{$i}) {
0% { @include transform(scaleX($i / $bar-total / 5)); }
100% { @include transform(scaleX(1));}
}
@include animation(loading-#{$i} 1s / $i $transition alternate infinite );
}
}
}
/**** Animation Mixins ******/
@mixin animation($animate...) {
$max: length($animate);
$animations: '';
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
-webkit-animation: $animations;
-moz-animation: $animations;
animation: $animations;
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
Raw
SassMeister-output.css
svg {
-moz-transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
.logo {
position: absolute;
top: 3em;
left: 5em;
}
.logo-bars {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
position: absolute;
top: 0;
left: -0.66667em;
}
.logo-bar {
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
background: #0AB3C4;
width: 5em;
height: 1em;
display: block;
position: relative;
margin-bottom: 0.66667em;
}
.logo-bar:nth-of-type(1) {
-moz-animation: loading-1 1s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
-webkit-animation: loading-1 1s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
animation: loading-1 1s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
}
@-moz-keyframes loading-1 {
0% {
-moz-transform: scaleX(0.06667);
transform: scaleX(0.06667);
}
100% {
-moz-transform: scaleX(1);
transform: scaleX(1);
}
}
@-webkit-keyframes loading-1 {
0% {
-webkit-transform: scaleX(0.06667);
transform: scaleX(0.06667);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes loading-1 {
0% {
-moz-transform: scaleX(0.06667);
-ms-transform: scaleX(0.06667);
-webkit-transform: scaleX(0.06667);
transform: scaleX(0.06667);
}
100% {
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
.logo-bar:nth-of-type(2) {
-moz-animation: loading-2 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
-webkit-animation: loading-2 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
animation: loading-2 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
}
@-moz-keyframes loading-2 {
0% {
-moz-transform: scaleX(0.13333);
transform: scaleX(0.13333);
}
100% {
-moz-transform: scaleX(1);
transform: scaleX(1);
}
}
@-webkit-keyframes loading-2 {
0% {
-webkit-transform: scaleX(0.13333);
transform: scaleX(0.13333);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes loading-2 {
0% {
-moz-transform: scaleX(0.13333);
-ms-transform: scaleX(0.13333);
-webkit-transform: scaleX(0.13333);
transform: scaleX(0.13333);
}
100% {
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
.logo-bar:nth-of-type(3) {
-moz-animation: loading-3 0.33333s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
-webkit-animation: loading-3 0.33333s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
animation: loading-3 0.33333s cubic-bezier(0.645, 0.045, 0.355, 1) alternate infinite;
}
@-moz-keyframes loading-3 {
0% {
-moz-transform: scaleX(0.2);
transform: scaleX(0.2);
}
100% {
-moz-transform: scaleX(1);
transform: scaleX(1);
}
}
@-webkit-keyframes loading-3 {
0% {
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
@keyframes loading-3 {
0% {
-moz-transform: scaleX(0.2);
-ms-transform: scaleX(0.2);
-webkit-transform: scaleX(0.2);
transform: scaleX(0.2);
}
100% {
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
/**** Animation Mixins ******/
Raw
SassMeister-rendered.html
<div class="logo">
<svg width="81px" height="81px" viewBox="0 0 81 81" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="logo" sketch:type="MSLayerGroup" fill="#0AB3C4">
<path d="M62.4,7.4 C66,7.4 68.9,10.3 68.9,13.9 C68.9,16 68.6,49.7 71.9,71.7 C53,69.1 21.5,68.9 14.4,68.9 L13.9,68.9 C10.3,68.9 7.4,66 7.4,62.4 L7.4,13.9 C7.4,10.3 10.3,7.4 13.9,7.4 L62.4,7.4 L62.4,7.4 Z M62.4,0 L13.9,0 C6.2,0 0,6.2 0,13.9 L0,62.4 C0,70.1 6.2,76.3 13.9,76.3 L14.4,76.3 C19.7,76.3 63.8,76.4 78.7,80.5 C78.8,80.5 79,80.6 79.1,80.6 C80.1,80.6 80.9,79.6 80.6,78.6 C75.8,58.8 76.2,13.9 76.2,13.9 C76.3,6.2 70.1,0 62.4,0 L62.4,0 Z" id="Shape" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
<div class="logo-bars">
<span class="logo-bar one"></span>
<span class="logo-bar two"></span>
<span class="logo-bar three"></span>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment