html+css简单实现loading

css：

body {
text-align: center
}

.grebtn {
display: inline-block;
padding: 0.5em 1.25em;
border: 1px solid;
border-radius: 2px;
vertical-align: bottom;
font-weight: inherit;
border-color: #208000 #1F7F00;
background-color: #289600;
box-shadow: inset 0 0 1px rgba(255, 255, 255, .6), 0 1px #8DBF62;
color: #fff;
text-shadow: 0 -1px #137900;
margin: 100px auto;
}

dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}

dot::before {
display: block;
content: '...A..A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}

@keyframes dot {
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}

html：

<div class="grebtn">loading
<dot>...</dot>
</div>