<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="spinner"> <div class="button"> <p>РАЗМЕСТИТЬ</p> </div> <div class="double-bounce1"></div> <div class="double-bounce2"></div> <div class="contour"></div> </div>

.spinner { width: 280px; height: 95px; position: relative; margin: 100px auto; border: 1px solid black; border-radius:5px; border-color:#7c8cff; bottom: 0; left: 0; } .double-bounce1{ width: 100%; height: 100%; background-color:#9abbfe; } .double-bounce2{ width: 100%; height: 100%; background-color:#c3ffc3; } .button{ width: 222px; height: 72px; bottom: 10px; left:10%; background-color:#7c8cff; position: absolute; border-radius:5px; } .button > p { color: #fff; text-align: center; z-index:1000; } .double-bounce1, .double-bounce2 { border-radius: 5px; opacity: 0.3; position: absolute; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; left: 0; bottom: 0; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.8) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(1.0); -webkit-transform: scale(1.0); } 50% { transform: scale(0.8); -webkit-transform: scale(0.8); } }