Sha256: baf58bf0052965bf64ed2f4b6a810d3cc4fe609164cb2221cf8c99b3a0672117
Contents?: true
Size: 1.33 KB
Versions: 7
Compression:
Stored size: 1.33 KB
Contents
$base-line-height: 24px;
$white: rgb(255,255,255);
$off-white: rgba($white, 0.2);
$spin-duration: 1s;
$pulse-duration: 750ms;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse {
50% {
background: $white;
}
}
/*html {
height: 100%;
}
body {
@extend html;
display: flex;
justify-content: space-around;
align-items: center;
background: #333333;
}*/
.loading {
border-radius: 50%;
width: $base-line-height;
height: $base-line-height;
border: .25rem solid $off-white;
border-top-color: $white;
animation: spin $spin-duration infinite linear;
&--double {
border-style: double;
border-width: .5rem;
}
}
.loading-pulse {
position: relative;
width: ($base-line-height / 4);
height: $base-line-height;
background: $off-white;
animation: pulse $pulse-duration infinite;
animation-delay: ($pulse-duration / 3);
&:before, &:after {
content: '';
position: absolute;
display: block;
height: ($base-line-height / 1.5);
width: ($base-line-height / 4);
background: $off-white;
top: 50%;
transform: translateY(-50%);
animation: pulse $pulse-duration infinite;
}
&:before {
left: -($base-line-height / 2);
}
&:after {
left: ($base-line-height / 2);
animation-delay: ($pulse-duration / 1.5);
}
}
Version data entries
7 entries across 7 versions & 1 rubygems