Rotating Sun

by parkji

HTML

<div class="loading"></div>

CSS

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.loading {
    border: 8px dashed yellow;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 10.0s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;
    position: relative;
}
.loading:after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    border: 6px dashed yellow;
    height: 75px;
    width: 75px;
    border-radius: 75px;
}
.loading:before {
    content: '';
    position: absolute;
    top: 25px;
    left: 25px;
    background: yellow;
    height: 50px;
    width: 50px;
    border-radius: 50px;
}

body {
    padding: 50px;
    background-color: lightblue;;
}