Back to all posts

Simple Loading Spinner using HTML and CSS


HTML Code

    <div className='spinner__wrapper'>
        <div className="spinner">

        </div>
    </div>

CSS

.spinner__wrapper {
    min-height: 60vh;
    display: grid;
}

.spinner__wrapper .spinner{
    width: 100px;
    height: 100px;
    place-self: center;
    border: 1px solid #bdbdbd;
    border-top-color: tomato;
    border-radius: 50%;
    animation:  rotate 1s infinite;
}

@keyframes rotate {
    100%{
        transform: rotate(360deg);
    }
}

Output