Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save whimsyniche/0c7a0c716fd309ee2f13ad69f620e884 to your computer and use it in GitHub Desktop.
Save whimsyniche/0c7a0c716fd309ee2f13ad69f620e884 to your computer and use it in GitHub Desktop.
preloader spinners
<!-- Preloader Start -->
<div class="preloader--1 Preloader">
<div class="preloader--1-spinners">
<div class="preloader--1-spinner preloader--1-spinner-1"></div>
<div class="preloader--1-spinner preloader--1-spinner-2"></div>
</div>
</div>
<!-- Preloader End -->
/*------------------------------------*\
# PRELOADER AREA 1
\*------------------------------------*/
.preloader--1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff5252;
z-index: 9999999;
}
.preloader--1-spinners {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
-webkit-animation: preloaderIRotate 2.0s infinite linear;
animation: preloaderIRotate 2.0s infinite linear;
}
.preloader--1-spinner,
.preloader--1-spinner {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #fff;
border-radius: 100%;
-webkit-animation: preloaderIBounce 2.0s infinite ease-in-out;
animation: preloaderIBounce 2.0s infinite ease-in-out;
}
.preloader--1-spinner-2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes preloaderIRotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes preloaderIRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}
@-webkit-keyframes preloaderIBounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes preloaderIBounce {
0%, 100% {
-webkit-transform: scale(0.0);
transform: scale(0.0);
} 50% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment