(Animasi CSS) Melingkar

Melingkar biasa disebut 'melengkau'. Contoh, ulau melengkau (ular melingkar) ..

Demo

HTML view ▼

<div class="dbulat">
  <div><div><div><div><div></div></div></div></div></div>
</div>
<style>
  .dbulat div {
  --s: 50px; 
  padding: calc(var(--s)/2);
  border-radius: 50%;
  background:
    radial-gradient(100% 50% at left,#c9b96e 97%,#0000 99%) 
     calc(50% + var(--s)/4) 0/calc(var(--s)/2) var(--s) no-repeat,
    conic-gradient(#38538e 20%,#c9b96e);
  animation: grk 5s linear infinite;
}
.dbulat div:empty {
  padding: var(--s);
}
@keyframes grk{to{rotate:360deg}}
.dbulat {
  margin: 0;
  min-height: 60vh;
  width: 100%;
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: #38538e;
  overflow: hidden; 
} 
  </style>

Tutup

Mencontoh CSS di codepen.io/t_afif/pen/GRPKBKB