<div class="wobbling-1"></div>
<div class="wobbling-2"></div>
<div class="wobbling-3"></div>
<div class="wobbling-4"></div>
<div class="wobbling-5"></div>
<div class="wobbling-6"></div>
<div class="wobbling-7"></div>
<div class="wobbling-8"></div>
<div class="wobbling-9"></div>
<div class="wobbling-10"></div>
.wobbling-1 {
  width: 30px;
  height: 30px;
  display: grid;
  transform: translateY(100%);
}
.wobbling-1::before,
.wobbling-1::after {
  content:"";
  grid-area: 1/1;
  border-radius: 50%;
  transform-origin: bottom;
  position: relative;
}
.wobbling-1::before {
  background: radial-gradient(at 30% 30%,#0000,#000a) red;
  transform: scaleY(0.65);
  top: 0;
  animation: w1-1, w1-2;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0,400,1,400),ease;
  animation-iteration-count: infinite;
}
.wobbling-1::after {
  background:#ccc;
  filter: blur(8px);
  transform: scaleY(0.3) translate(0px,0px);
  left:0;
  animation:w1-3 2s cubic-bezier(0,400,1,400) infinite;
}

@keyframes w1-1 {
  100% {top:-0.2px}
}
@keyframes w1-2 {
  4%,96% {transform: scaleY(1)}
}
@keyframes w1-3 {
  100% {transform: scaleY(0.3) translate(0.1px,-0.1px)}
}

.wobbling-2 {
  width: 100px;
  height: 60px;
  display: flex;
  animation: w2-0 2s infinite linear;
}
.wobbling-2::before,
.wobbling-2::after  {
  content:"";
  flex:4;
  background: 
    radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x,
    linear-gradient(red 0 0) bottom/100% 20px no-repeat
    #ddd;
  -webkit-mask:
  repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,
  radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;
}
.wobbling-2::after {
  flex: 1;
  transform-origin: top;
  animation: w2-1 1s cubic-bezier(0,20,1,20) infinite;
}

@keyframes w2-0 { 
 0%,49.9% {transform: scaleX(1)}
 50%,100% {transform: scaleX(-1)}
}

@keyframes w2-1 { 
 100% {transform: rotate(-2deg)}
}

.wobbling-3{
  width:20px;
  height:20px;
  animation: w3-0 2s linear infinite;
}
.wobbling-3::before,
.wobbling-3::after {
  content: "";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  animation: w3-1 0.5s cubic-bezier(.5,-500,.5,500) infinite;
}
.wobbling-3::after {
  animation-delay: -0.15s;
}

@keyframes w3-0 { 
  100% { transform:rotate(360deg)} 
}
@keyframes w3-1 { 
  100% { transform:translate(0.5px)} 
}


.wobbling-4 {
  width: 80px;
  height: 80px;
  background: 
    radial-gradient(farthest-side at top,#0000 calc(100% - 21px),lightblue calc(100% - 20px) 99%,#0000) bottom/100% 50%,
    radial-gradient(farthest-side,lightblue 94%,#0000 ) left /20px 20px,
    radial-gradient(farthest-side,lightblue 94%,#0000 ) right/20px 20px;
  background-repeat: no-repeat;
  position: relative;
}
.wobbling-4::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  inset: auto 0 0;
  margin:auto;
  border-radius: 50%;
  background:orange;
  transform-origin: 50% -20px;
  animation: w4 1s infinite cubic-bezier(0.5,623,0.5,-623);
}
@keyframes w4 { 
 100% {transform: rotate(0.5deg)}
}


.wobbling-5 {
  height:80px;
  width:20px;
  color: #514b82;
  background:
    radial-gradient(farthest-side,currentColor 94%,#0000 ) top/8px 8px,
    linear-gradient(currentColor 0 0) top/4px 70%,
    conic-gradient(from -30deg at bottom,#0000,currentColor 2deg 58deg,#0000 60deg) bottom            /100% 20px,
    conic-gradient(from 150deg at top   ,#0000,currentColor 2deg 58deg,#0000 60deg) bottom 20px left 0/100% 20px;
  background-repeat:no-repeat;
  transform-origin: 50% 4px;
  animation: w5 2s infinite cubic-bezier(0.5,300,0.5,-300);
}

@keyframes w5 { 
 100% {transform: rotate(0.5deg)}
}

.wobbling-6 {
    width: 80px;
    height: 50px;
    background: 
      radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) center/50px 100%, 
      linear-gradient(#ccc 0 0) bottom/100% 14px;
    background-repeat: no-repeat;
    position: relative;
    animation: w6-0 2s -0.5s infinite linear;
}

.wobbling-6:before {
    content: "";
    position: absolute;
    inset: auto auto 2px 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f03355;
    transform-origin:50% -14px;
    animation: w6-1 .5s infinite linear alternate;
}

@keyframes w6-0 { 
    0%,49.99% {transform:scaleX(1)}
    50%,100%  {transform:scaleX(-1)} 
}

@keyframes w6-1 {
  0%   {transform:translate(0) rotate(0) }
  50%  {transform:translate(34px) rotate(0) }
  100% {transform:translate(34px) rotate(-180deg) }
}

.wobbling-7 {
  height:20px;
  width:80px;
  transform:rotate(-30deg);
  background: 
    radial-gradient(farthest-side,#f03355 90%,#0000) left bottom/15px 15px no-repeat
    #ddd;
  animation:
    w7-0 2s infinite alternate linear,
    w7-1 2s infinite cubic-bezier(.75,0,1,.6);
}

@keyframes w7-0 {
    50% {transform:rotate(30deg)}
}

@keyframes w7-1 {
    50% {background-position: right bottom}
}

.wobbling-8 {
  height: 40px;
  width: calc(20px*4);
  color: #25b09b;
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size:calc(100%/4 + 1px) 50%;
  background-repeat: no-repeat;
  animation: w8 1s infinite cubic-bezier(0.5,150,0.5,-150);
}

@keyframes w8 {
    0%   {background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%  , calc(2*100%/3) 50%  , calc(3*100%/3) 50%}
    100% {background-position: calc(0*100%/3) 51%, calc(1*100%/3) 50.5%, calc(2*100%/3) 49.5%, calc(3*100%/3) 49%}
}


.wobbling-9 {
  height: 30px;
  width: calc(15px*6);
  color: #514b82;
  background:
    linear-gradient(currentColor 0 0) calc(0*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(1*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(2*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(3*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(4*100%/5) 50%,
    linear-gradient(currentColor 0 0) calc(5*100%/5) 50%;
  background-size:calc(100%/6 + 1px) 50%;
  background-repeat: no-repeat;
  animation: w9 1s infinite cubic-bezier(0.5,170,0.5,-170);
}

@keyframes w9 {
    14.28% {background-position: calc(0*100%/5) 51%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    28.57% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 51%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    42.85% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 51%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    57.14% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 51%, calc(4*100%/5) 50%, calc(5*100%/5) 50%}
    71.42% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 51%, calc(5*100%/5) 50%}
    85.71% {background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 51%}
}

.wobbling-10 {
  height:60px;
  width:60px;
  position: relative;
}
.wobbling-10::before,
.wobbling-10::after {
  content: "";
  position: absolute;
  inset:0;
  border-radius: 50%;
  transform-origin: bottom;
}
.wobbling-10::after {
  background:
    radial-gradient(at 75% 15%,#fffb,#0000 35%),
    radial-gradient(at 80% 40%,#0000,#0008),
    radial-gradient(circle  5px,#fff 94%,#0000),
    radial-gradient(circle 10px,#000 94%,#0000),
    linear-gradient(#F93318 0 0) top   /100% calc(50% - 5px),
    linear-gradient(#fff    0 0) bottom/100% calc(50% - 5px)
    #000;
  background-repeat: no-repeat;
  animation: w10 1s infinite cubic-bezier(0.5,120,0.5,-120);
}

.wobbling-10::before {
  background:#ddd;
  filter: blur(8px);
  transform: scaleY(0.4) translate(-13px, 0px);
}

@keyframes w10 { 
 30%,70% {transform:rotate(0deg)}
 49.99%  {transform:rotate(0.2deg)}
 50%     {transform:rotate(-0.2deg)}
}


/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}
/* more loaders here: https://dev.to/afif/series/12889 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.