HTML
<div class="wrapper">
<div class="container">
<div class="spinner"></div>
</div>
</div>
<p>There are several ways you can find help for your Sass troubles; Sass has a warm and welcoming community, and we love helping people.</p>
CSS
body {
background: black;
min-width: 500px;
}
body .wrapper.hidden {
display: none;
}
body .wrapper {
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
z-index: 1;
background: #555;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
}
body .wrapper .container {
position: absolute;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
body .wrapper .container .spinner {
border: solid 10px red;
border-radius: 100%;
border-color: transparent red transparent transparent;
position: relative;
height: 90%;
width: 90%;
-webkit-animation: spin 1.4s ease infinite;
animation: spin 1.4s ease infinite;
}
body .wrapper .container .spinner:before {
content: '';
position: absolute;
border: solid 10px green;
border-radius: 100%;
border-color: transparent green transparent transparent;
height: 90%;
width: 90%;
-webkit-animation: spin 1.2s ease-in infinite;
animation: spin 1.2s ease-in infinite;
}
body .wrapper .container .spinner:after {
content: '';
position: absolute;
border: solid 10px blue;
border-radius: 100%;
border-color: transparent blue transparent transparent;
height: 200px;
width: 200px;
top: -20px;
left: -20px;
-webkit-animation: spin 1s ease-out infinite;
animation: spin 1s ease-out infinite;
}
body .wrapper .spinner,
body .wrapper .spinner:after,
body .wrapper .spinner:before {
border-width: 3px;
}
p {
color: white;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
