Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ######### #########
- ###### PRELOADER DLA MATIEGO ######
- ######### #########
- ##js
- $(document).ready(function() {
- "use strict";
- // ------------- Pre-loader--------------
- // makes sure the whole site is loaded
- $(window).load(function() {
- // will first fade out the loading animation
- $(".preloader").fadeOut();
- //then background color will fade out slowly
- $("#faceoff").delay(200).fadeOut("slow");
- });
- ##css
- #faceoff {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 10000;
- }
- #preloader {
- display: block;
- position: relative;
- left: 50%;
- top: 50%;
- width: 150px;
- height: 150px;
- margin: -75px 0 0 -75px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #3498db;
- -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
- animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
- z-index: 10001;
- }
- #preloader:before {
- content: "";
- position: absolute;
- top: 5px;
- left: 5px;
- right: 5px;
- bottom: 5px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #444;
- -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
- animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
- }
- #preloader:after {
- content: "";
- position: absolute;
- top: 15px;
- left: 15px;
- right: 15px;
- bottom: 15px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #1487b2;
- -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
- animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
- }
- @-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: rotate(0deg); /* IE 9 */
- transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
- }
- 100% {
- -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: rotate(360deg); /* IE 9 */
- transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
- }
- }
- @keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: rotate(0deg); /* IE 9 */
- transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
- }
- 100% {
- -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: rotate(360deg); /* IE 9 */
- transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
- }
- }
- #faceoff .preloader-section {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- background: #020e14;
- z-index: 10000;
- -webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: translateX(0); /* IE 9 */
- transform: translateX(0); /* Firefox 16+, IE 10+, Opera */
- }
- /* Loaded */
- .loaded #faceoff .preloader-section {
- -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: translateY(-100%); /* IE 9 */
- transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
- .loaded #preloader {
- opacity: 0;
- -webkit-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
- }
- .loaded #faceoff {
- visibility: hidden;
- -webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
- -ms-transform: translateY(-100%); /* IE 9 */
- transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
- -webkit-transition: all 0.3s 1s ease-out;
- transition: all 0.3s 1s ease-out;
- }
- ##html
- <!-- Preloader -->
- <div id="faceoff">
- <div id="preloader"></div>
- <div class="preloader-section"></div>
- </div>
- <!-- Preloader end -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement