A preloader or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
.page-loader{ position: fixed; z-index: 200; width: 100%; height: 100%; top:0; left:0; background: #fff; display: block; } .page-loader .fa{ font-size: 2.5rem; } .page-loader, .page-loader.visible{ -webkit-transition: 0.6s; -ms-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s; opacity: 1; visibility: visible; } .page-loader.p-hidden{ visibility: hidden; opacity: 0; } .page-loader div{ position: absolute; top:50%; width: 100%; text-align: center; color: #1d1d1d; margin-top: -50px; display: block; } .page-loader div .icon{ display: inline-block; margin-left: -20px; left: 50%; width: 40px; height: 40px; content: ""; background: #1d1d1d; border-radius: 100px; border: 8px solid #fff; border-top-color: rgba(255, 255, 255, 0.58); border-bottom-color: rgba(255, 255, 255, 0.58); } .page-loader div p{ margin-top: 100px; font-size: 14px; color: #555; letter-spacing: 1em; padding-left: 1em; text-transform: uppercase; font-family: 'Roboto', 'Helvetica', sans-serif; font-weight: bold; } .ion-spin, .ion-loading-a, .ion-loading-b, .ion-loading-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 1s infinite linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } |
HTML
|
1 2 3 4 5 6 |
<div class="page-loader" id="page-loader"> <div> <div class="icon ion-spin"></div> <p>loading</p> </div> </div> |