<div class="dot-wave">
	<div class="dot-wave__dot"></div>
	<div class="dot-wave__dot"></div>
	<div class="dot-wave__dot"></div>
	<div class="dot-wave__dot"></div>
</div>

<hr>
<div class="jelly"></div>

<svg width="0" height="0" class="jelly-maker">
	<defs>
		<filter id="uib-jelly-ooze">
			<feGaussianBlur in="SourceGraphic" stdDeviation="6.25" result="blur" />
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="ooze" />
			<feBlend in="SourceGraphic" in2="ooze" />
		</filter>
	</defs>
</svg>

<hr>

<div class="race-by"></div>

<hr>

<div class="dot-pulse">
	<div class="dot-pulse__dot"></div>
</div>
body {
	padding: 1em;
}

hr {
	margin: 2em 0;
}

div {
	margin: auto;
}
.dot-wave {
	--uib-size: 47px;
	--uib-speed: 1s;
	--uib-color: black;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	width: var(--uib-size);
	height: calc(var(--uib-size) * 0.17);
	padding-top: calc(var(--uib-size) * 0.34);
}

.dot-wave__dot {
	flex-shrink: 0;
	width: calc(var(--uib-size) * 0.17);
	height: calc(var(--uib-size) * 0.17);
	border-radius: 50%;
	background-color: var(--uib-color);
	will-change: transform;
}

.dot-wave__dot:nth-child(1) {
	animation: jump var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.45)
		infinite;
}

.dot-wave__dot:nth-child(2) {
	animation: jump var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.3)
		infinite;
}

.dot-wave__dot:nth-child(3) {
	animation: jump var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.15)
		infinite;
}

.dot-wave__dot:nth-child(4) {
	animation: jump var(--uib-speed) ease-in-out infinite;
}

@keyframes jump {
	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-200%);
	}
}

.jelly {
	--uib-size: 50px;
	--uib-speed: 0.9s;
	--uib-color: black;

	position: relative;
	height: calc(var(--uib-size) / 2);
	width: var(--uib-size);
	filter: url("#uib-jelly-ooze");
	animation: rotate calc(var(--uib-speed) * 2) linear infinite;
}

.jelly::before,
.jelly::after {
	content: "";
	position: absolute;
	top: 0%;
	left: 25%;
	width: 50%;
	height: 100%;
	background: var(--uib-color);
	border-radius: 100%;
}

.jelly::before {
	animation: shift-left var(--uib-speed) ease infinite;
}

.jelly::after {
	animation: shift-right var(--uib-speed) ease infinite;
}

.jelly-maker {
	width: 0;
	height: 0;
	position: absolute;
}

@keyframes rotate {
	0%,
	49.999%,
	100% {
		transform: none;
	}

	50%,
	99.999% {
		transform: rotate(90deg);
	}
}

@keyframes shift-left {
	0%,
	100% {
		transform: translateX(0%);
	}
	50% {
		transform: scale(0.65) translateX(-75%);
	}
}

@keyframes shift-right {
	0%,
	100% {
		transform: translateX(0%);
	}
	50% {
		transform: scale(0.65) translateX(75%);
	}
}
.race-by {
	--uib-size: 80px;
	--uib-speed: 1.4s;
	--uib-color: black;
	--uib-line-weight: 5px;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--uib-line-weight);
	width: var(--uib-size);
	border-radius: calc(var(--uib-line-weight) / 2);
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}

.race-by::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--uib-color);
	opacity: 0.1;
}

.race-by::after {
	content: "";
	height: 100%;
	width: 100%;
	border-radius: calc(var(--uib-line-weight) / 2);
	animation: raceBy var(--uib-speed) ease-in-out infinite;
	transform: translateX(-100%);
	background-color: var(--uib-color);
}

@keyframes raceBy {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}
.dot-pulse {
	--uib-size: 40px;
	--uib-speed: 1.3s;
	--uib-color: black;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--uib-size);
	height: calc(var(--uib-size) * 0.27);
}

.dot-pulse__dot,
.dot-pulse::before,
.dot-pulse::after {
	content: "";
	display: block;
	height: calc(var(--uib-size) * 0.18);
	width: calc(var(--uib-size) * 0.18);
	border-radius: 50%;
	background-color: var(--uib-color);
	transform: scale(0);
}

.dot-pulse::before {
	animation: pulse var(--uib-speed) ease-in-out infinite;
}

.dot-pulse__dot {
	animation: pulse var(--uib-speed) ease-in-out calc(var(--uib-speed) * 0.125)
		infinite both;
}

.dot-pulse::after {
	animation: pulse var(--uib-speed) ease-in-out calc(var(--uib-speed) * 0.25)
		infinite;
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(0);
	}

	50% {
		transform: scale(1.5);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.