I'm building a load and I'm having 2 problems.
1st How to leave the circle
div that contains the animation in the vertical and horizontal center of the screen.
2º How to leave the load tips rounded.
.loading {
background: #000;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
}
.circle {
width: 80px;
height: 80px;
border-radius: 40px;
box-sizing: border-box;
border: solid 10px rgba(255, 255, 255, 0.2);
border-top-color: #FFF;
animation: spin 1s infinite linear;
}
@keyframes bouncy {
40% {
height: 40px;
}
50% {
transform: translate(0, 65px);
height: 34px;
border-radius: 20px;
}
65% {
height: 40px;
}
}
@keyframes push {
50% {
margin-left: 56px;
}
}
@keyframes slide {
50% {
margin-top: 25px;
}
}
@keyframes pulse {
50% {
border-width: 30px;
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes cross {
50% {
margin-left: 60px;
}
}
<!-- Loading -->
<div class="loading">
<div class="circle"></div>
</div>