src/spinner/style.scss
@import "./_variables/variables";
@import "./_mixins/mixins";
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.spinner-gritcode {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9998;
position: absolute;
width: 100%;
text-align: center;
background: rgba(255, 255, 255, 0.4);
}
.spinner-gritcode.spinner-fixed {
position: fixed;
}
.spinner-gritcode .spinner-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.spinner-gritcode .spinner-circle {
position: relative;
border: 4px solid #ccc;
border-radius: 50%;
display: inline-block;
animation: spin 0.6s linear;
animation-iteration-count: infinite;
width: 3em;
height: 3em;
z-index: 2;
border-right-color: $brand-primary;
@include themify($themes) {
border-right-color: themed('brand-primary');
}
}
.spinner-gritcode .spinner-text {
position: relative;
text-align: center;
margin-top: 0.5em;
z-index: 2;
width: 100%;
font-size: 95%;
color: $brand-primary;
@include themify($themes) {
color: themed('brand-primary');
}
}
.spinner-gritcode.spinner-sm .spinner-circle {
width: 1.5em;
height: 1.5em;
}
.spinner-gritcode.spinner-md .spinner-circle {
width: 2em;
height: 2em;
}
.spinner-gritcode.spinner-lg .spinner-circle {
width: 2.5em;
height: 2.5em;
}
.spinner-gritcode.spinner-xl .spinner-circle {
width: 3.5em;
height: 3.5em;
}
.lt-ie10 .spinner-gritcode .spinner-circle,
.ie9 .spinner-gritcode .spinner-circle,
.oldie .spinner-gritcode .spinner-circle,
.no-csstransitions .spinner-gritcode .spinner-circle,
.no-csstransforms3d .spinner-gritcode .spinner-circle {
animation: none;
margin-left: 0;
margin-top: 5px;
border: none;
width: 32px;
height: 32px;
}