<div class="loading">
<div class="spin"></div>
<p>Відбувається завантаження сторінки...</p>
</div>
.loading {
font-size: 19px;
width: 240px;
margin: auto;
padding: 20px 0 10px;
background: #800080;
color: #fff;
text-align: center;
}
.spin {
display: inline-block;
width: 30px;
height: 30px;
border: 10px solid #808080;
border-right: 10px solid #E6E6FA;
border-radius: 30px;
-webkit-animation: spin 2s linear 0s infinite normal;
-moz-animation: spin 2s linear 0s infinite normal;
-o-animation: spin 2s linear 0s infinite normal;
animation: spin 2s linear 0s infinite normal;
}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); } }
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); } }
@-o-keyframes spin { from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(360deg); } }
@keyframes spin { from { transform: rotate(0deg); }
to { transform: rotate(360deg); } }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.