Free Photos
WordPress Themes

CSS Animated Spinning Blob Loader

HTML
<div class='dot-container'> <div class='dots'></div> </div>
SCSS
$base-bg: #f3f3f3; $bgColor: #fff; $n: 8; $steps: 12; $framePercent: 100%/($steps); $blobsBg: (); $xPos: 50%; $yPos: 50%; $bgPosList: 40% 50%, 43% 43%, 50% 40%, 57% 43%, 60% 50%, 57% 57%, 50% 60%, 43% 57%; @for $i from 0 to $n { $blobsBg: $blobsBg, var(--gradient); } @keyframes animate { 0% { background-position: 50%; } @for $j from 1 through $n { $finalPos: null; @for $x from 1 through $n { @if $x <= $j { $finalPos: append($finalPos, nth($bgPosList, $x), comma); } @else { $finalPos: append($finalPos, 50%, comma); } } #{$framePercent * $j} { background-position: $finalPos; } } 100% { background-position: $bgPosList; } } body, html { overflow: hidden; display: flex; justify-content: center; align-itrems: center; } html { width: 100%; height: 100%; background: linear-gradient(rgba($base-bg, .9), rgba($base-bg, .9)), url(https://images.unsplash.com/reserve/0y86gz4sT4O2ZQJIRWXE_IMG_0476.JPG?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=); background-color: $base-bg; background-size: cover; background-blend-mode: normal, luminosity; mix-blend-mode: multiply; } .dot-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; overflow: hidden; animation: rotate 6s linear infinite; } .dots { width: 950px; height: 950px; --pos: 50% 50%; --gradient: radial-gradient(black 67%, transparent 68%); background: linear-gradient(#14fff4, #ef00ff); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); &:after { margin: 0; height: 100%; border-radius: 50%; display: block; box-shadow: 0 0 0 2rem $bgColor; background: $blobsBg $bgColor; background-size: 2.5rem 2.5rem, 3rem 3rem; background-position: 50%; background-repeat: no-repeat; filter: blur(8px) contrast(9); mix-blend-mode: lighten; animation: animate 4s cubic-bezier(0.38, -0.08, 0.42, 2.04) alternate infinite; transform: translateZ(0); content: ""; } } @keyframes rotate { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
JAVASCRIPT
Expand for more options Login