Newton Cradle Loader
ニュートンのゆりかごをCSS transformで再現したフィジカルローダー。
HTML
<div class="ncl-wrap"> <div class="ncl-ball ncl-first"></div> <div class="ncl-ball"></div> <div class="ncl-ball"></div> <div class="ncl-ball"></div> <div class="ncl-ball ncl-last"></div> </div>
CSS
.ncl-wrap {
display: flex;
align-items: flex-end;
gap: 2px;
height: 60px;
}
.ncl-ball {
width: 14px;
height: 14px;
background: #6366f1;
border-radius: 50%;
transform-origin: center -20px;
}
.ncl-first {
animation: ncl-left 1s ease-in-out infinite;
}
.ncl-last {
animation: ncl-right 1s ease-in-out infinite;
}
@keyframes ncl-left {
0% { transform: rotate(0); }
25% { transform: rotate(-30deg); }
50%, 100% { transform: rotate(0); }
}
@keyframes ncl-right {
0%, 50% { transform: rotate(0); }
75% { transform: rotate(30deg); }
100% { transform: rotate(0); }
}