#preloader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0, 0, 0, 0.5)} #preloader-style { display: block; position: relative; left: 45%; top: 55%; border: 10px solid rgba(0,0,0, 0.2); border-top: 10px solid #eb9d00; border-radius: 50%; width: 100px; height: 100px; animation: spin 0.7s linear infinite; } #preloader-panel { display: block; position: relative; left: 45%; top: 55%; border: 10px solid rgba(0,0,0, 0.2); border-top: 10px solid #eb9d00; border-radius: 50%; width: 100px; height: 100px; animation: spin 0.7s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #preloader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; z-index: 1000; } #preloader-wrapper .loader-section.section-left { left: 0; } #preloader-wrapper .loader-section.section-right { right: 0; } .preloader-load #preloader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-100%); /* IE 9 */ transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .preloader-load #preloader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(100%); /* IE 9 */ transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .preloader-load #preloader-style { opacity: 0; -webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .preloader-load #preloader-panel { opacity: 0; -webkit-transition: all 0.3s ease-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ } .preloader-load #preloader-wrapper { visibility: hidden; }