CSS Logo Spinner Thailand Spinner for Loading

CSS Logo Spinner Thailand Spinner for Loading

➤ CSS

<style>
.spinner {
width: 40px;
height: auto;
background-color: #333;

margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}

@keyframes sk-rotateplane {
0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>

➤ HTML Coding

<div class="spinner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVw6ysRV_npHyN5XiYDvugHaTBHGbkols42acsurgEQXUtyM-JVYUxlfY8frs-CWgIllkz_DGDai3ibLVhwEfr0mBql7zzM5nWkVKo3bHGI0tvaBEERUz1kXpQ_JOADtmqG-BhDJ4-uLE/s320/thailand_logo.png" style="width:40px;height:auto;">
</div>

ความคิดเห็น