i have css loader , need on adding few more cercles can make gif right here http://i.stack.imgur.com/fpzfj.gif . know css beyond me. need support.
.wrapper { position: relative; height: 100%; width: 100%; } p { line-height: 1.33em; color: #7e7e7e; } h1 { color: #eee; } #content { margin: 0 auto; padding-bottom: 50px; width: 80%; max-width: 978px; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 10px solid transparent; border-top-color: #3498db; z-index: 1001; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 10px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 20px; right: 20px; left: 20px; bottom: 20px; border-radius: 50%; border: 10px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #222; z-index: 1000; -webkit-transform: translatex(0); -ms-transform: translatex(0); transform: translatex(0); } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } @-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); } } .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translatex(-100%); -ms-transform: translatex(-100%); transform: translatex(-100%); -webkit-transition: 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translatex(100%); -ms-transform: translatex(100%); transform: translatex(100%); -webkit-transition: 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .loaded #loader { opacity: 0; -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out; } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translatey(-100%); -ms-transform: translatey(-100%); transform: translatey(-100%); -webkit-transition: 0.3s 1s ease-out; transition: 0.3s 1s ease-out; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> </div> </div>
Comments
Post a Comment