Generated by SassMeister.com.
> 1%
last 2 versions
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spinner-container {
position: relative;
}
.spinner-container .spinner {
width: 4rem;
width: 4rem;
position: absolute;
top: 5rem;
left: 50%;
-webkit-transform: translateZ(0) translate(-50%, -50%);
transform: translateZ(0) translate(-50%, -50%);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation: rotate 1.8s infinite linear;
animation: rotate 1.8s infinite linear;
background-image: url("../img/loading-gear.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spinner-container{
position: relative;
.spinner{
width: 4rem;
width: 4rem;
position: absolute;
top: 5rem;
left: 50%;
transform: translateZ(0) translate(-50%, -50%);
transform-origin: center center;
animation: rotate 1.8s infinite linear;
background-image: url("../img/loading-gear.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}