HTML & CSS Page Loader

HTML & CSS Page Loader

by Intesar Haider

HTML

<div class="loader">
	<div class="circle"></div>
	<div class="circle1"></div>
	Preparing Builder...
</div>

<div class="container-fullscreen">
    	<div class="container text-center">
        	<div id="choose-template" class="text-center hidden">
                <button class="choose" type="button" data-id="no-sidebar"><img src="assets/img/no-sidebar.jpg" class="img-responsive" alt=""><span>No Sidebar (wide)</span></button>
                <button class="choose" type="button" data-id="left-sidebar"><img src="assets/img/left-sidebar.jpg" class="img-responsive" alt=""><span>Left Sidebar</span></button>
                <button class="choose" type="button" data-id="right-sidebar"><img src="assets/img/right-sidebar.jpg" class="img-responsive" alt=""><span>Right Sidebar</span></button>
                <button class="choose" type="button" data-id="both-sidebar"><img src="assets/img/both-sidebar.jpg" class="img-responsive" alt=""><span>Both Sidebars</span></button>
            </div>
        </div>
        <div class="container-content hidden" id="mail-template">
            Content
        </div>
        <div class="container-sidebar hidden" id="option-tabs">

            <div id="get-options" class="text-center">
                <h4>Drag and drop the elements below to the work area on the left</h4>
            <!--    <div class="get-options choose" data-id="title" id="title"><span class="glyphicon glyphicon-text-size"></span><div>Heading</div></div>  -->
                <div class="get-options choose" data-id="content" id="content"><span class="glyphicon glyphicon-list-alt"></span><div>Text</div></div>
                <div class="get-options choose" data-id="image" id="image"><span class="glyphicon glyphicon-picture"></span><div>Image</div></div>
                <div class="get-options choose" data-id="video" id="video"><span class="glyphicon glyphicon-play"></span><div>Video</div></div>
                <div class="get-options choose" data-id="link" id="link"><span...

CSS

body {
    background:#000;
    color:#fff;
}
.loader{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.circle {
    background-color: #B1CAD1;
    border: 5px solid rgba(230, 50, 38, 0.9);
    opacity: 0.9;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 35px #DAEAEF;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color: #233740;
    border: 5px solid rgba(230, 50, 38, 0.9);
    opacity: 0.9;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #FDDCBD;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
    top: -60px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #FDDCBD;
    }
    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }
    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #FDDCBD;
    }
    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}