Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="page" data-uia-loader-skin="1">
	<div class="page__loader">
		<div class="uia-loader" data-uia-loader-adapter-skin-1="ui-clippy-loader-skin-#1">
			<div class="uia-loader__canvas">
				<div class="uia-clippy-loader" data-uia-clippy-loader-skin="1" data-uia-clippy-loader-mod="1"></div>
			</div>
			<div class="uia-loader__caption">Loading</div>
		</div>
	</div>
	<div class="page__loader">
		<div class="uia-loader" data-uia-loader-adapter-skin-1="ui-clippy-loader-skin-#1">
			<div class="uia-loader__canvas">
				<div class="uia-clippy-loader" data-uia-clippy-loader-skin="1" data-uia-clippy-loader-mod="2"></div>
			</div>
			<div class="uia-loader__caption">Loading</div>
		</div>
	</div>
	<div class="page__loader">	
		<div class="uia-loader" data-uia-loader-adapter-skin-1="ui-clippy-loader-skin-#1">
			<div class="uia-loader__canvas">
				<div class="uia-clippy-loader" data-uia-clippy-loader-skin="1" data-uia-clippy-loader-mod="3"></div>
			</div>
			<div class="uia-loader__caption">Loading</div>
		</div>
	</div>
	<div class="page__loader">
		<div class="uia-loader">
			<div class="uia-loader__canvas">
				<div class="uia-square-loader"></div>
			</div>
			<div class="uia-loader__caption">Loading</div>
		</div>		
	</div>
	<div class="page__loader">
		<div class="uia-loader">
			<div class="uia-loader__canvas">
				<div class="uia-tennis-loader">
					<div class="uia-tennis-loader__ball"></div>
				</div>
			</div>
			<div class="uia-loader__caption">Loading</div>
		</div>		
	</div>
	<div class="page__loader page__flask">
		<div class="uia-loader">
			<div class="uia-loader__canvas">
				<div class="uia-flask-loader">
					<div class="uia-flask-loader__bubble"></div>
					<div class="uia-flask-loader__bubble"></div>
					<div class="uia-flask-loader__bubble"></div>
					<div class="uia-flask-loader__bubble"></div>
				</div>
			</div>
			<div class="uia-loader__caption">Loading</div>
		</div>		
	</div>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

.uia-loader {
	--_uia-loader-size_default: 5rem; 
	--_uia-loader-main-aligment: var(--uia-loader-main-aligment, center);
	/*	
	inline-size: var(--uia-loader-main-size, var(--_uia-loader-size_default));
	block-size: var(--uia-loader-extra-size, var(--_uia-loader-size_default));
	*/
	display: var(--uia-loader-display, grid);
	gap: var(--uia-loader-caption-gap, 0.5rem);
	justify-items: var(--_uia-loader-main-aligment);
}

.uia-loader__canvas {
	--_uia-loader-canvas-size: var(--uia-loader-canvas-size, 3rem);

box-sizing: border-box;	
	inline-size: var(--uia-loader-canvas-main-size, var(--_uia-loader-canvas-size));
	block-size: var(--uia-loader-canvas-extra-size, var(--_uia-loader-canvas-size));
	padding: var(--uia-loader-canvas-safe-gap, 0.25rem);

display: var(--uia-loader-canvas-display, grid);
	justify-items: var(--_uia-loader-main-aligment);
	align-items: var(--uia-loader-canvas-extra-aligment, center);
}

[data-uia-loader-adapter-skin-1="ui-clippy-loader-skin-#1"] {
	--uia-clippy-loader-size: calc(var(--uia-loader-canvas-main-size) - 0.25rem);
}

[data-uia-loader-skin="1"] .uia-loader__caption {
	font-size: var(--uia-loader-caption-font-size);
	color: var(--uia-loader-caption-color);
}

.uia-clippy-loader {
	--_uia-clippy-loader-size: var(--uia-clippy-loader-size, 2rem);
	--_uia-clippy-loader-animation-name: var(--uia-clippy-loader-animation-name);
	--_uia-clippy-loader-animation-duration: var(--uia-clippy-loader-animation-duration, 2s);
	--_uia-clippy-loader-animation-fill-mode: var(--uia-clippy-loader-animation-fill-mode, both);
	--_uia-clippy-loader-animation-iteration-count: var(--uia-clippy-loader-animation-iteration-count, infinite);
	--_uia-clippy-loader-stroke: var(--uia-clippy-loader-stroke, 2px);

box-sizing: border-box;
	inline-size: var(--_uia-clippy-loader-size);
	block-size: var(--_uia-clippy-loader-size);
	padding: var(--_uia-clippy-loader-stroke);

background-color: var(--uia-clippy-loader-stroke-color, #222);

animation-name: var(--_uia-clippy-loader-animation-name);
	animation-duration: var(--_uia-clippy-loader-animation-duration);
	animation-fill-mode: var(--_uia-clippy-loader-animation-fill-mode);
	animation-iteration-count: var(--_uia-clippy-loader-animation-iteration-count);

position: relative;
}

.uia-clippy-loader::before {
	content: "";
	position: absolute;
	inset: var(--_uia-clippy-loader-stroke);
	background-color: var(--uia-clippy-loader-background-color, #fff);

[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="1"], 
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="1"]::before {
	--uia-clippy-loader-animation-name: uia-clippy-loader-1;
}

[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="2"], 
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="2"]::before {
	--uia-clippy-loader-animation-name: uia-clippy-loader-2;
}

[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="3"], 
[data-uia-clippy-loader-skin="1"][data-uia-clippy-loader-mod="3"]::before {
	--uia-clippy-loader-animation-name: uia-clippy-loader-3;
}

@keyframes uia-clippy-loader-1 {
	0%, 30% {
		clip-path: polygon(0 15%, 0 0, 85% 0, 85% 0, 100% 0, 100% 85%, 100% 85%, 100% 100%, 15% 100%, 15% 100%, 0 100%, 0 15%);
	}

70%, 100% {
		clip-path: polygon(0 0, 85% 0, 85% 0, 100% 0, 100% 85%, 100% 85%, 100% 100%, 15% 100%, 15% 100%, 0 100%, 0 15%, 0 15%);
	}
}

@keyframes uia-clippy-loader-2 {
	0%, 20% {
		clip-path: polygon(0% 0, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%);
	}

40%, 60% {
		clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0% 25%);
	}

80%, 100% {
		clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
	}
}

@keyframes uia-clippy-loader-3 {
	0%, 20% {
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
	}

40%, 60% {
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}

80%, 100% {
		clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0% 0%);
	}

}

.uia-square-loader {
	--_uia-square-loader-size_default: 2rem;
	--_uia-square-loader-little-size_default: 20%;
	--_uia-square-loader-color: var(--uia-square-loader-color, #222);

box-sizing: border-box;
	inline-size: var(--uia-square-loader-size, var(--_uia-square-loader-size_default));
	block-size: var(--uia-square-loader-size, var(--_uia-square-loader-size_default));
	border: var(--uia-square-loader-border-thickness, 2px) var(--uia-square-loader-border-style, solid) var(--uia-square-loader-border-color, var(--_uia-square-loader-color));

display: grid;
	place-items: center;
}

.uia-square-loader::before {
	content: "";
	inline-size: var(--_uia-square-loader-little-size, var(--_uia-square-loader-little-size_default));
	height: var(--_uia-square-loader-little-size, var(--_uia-square-loader-little-size_default));
	background-color: var(--uia-square-loader-little-background-color, var(--_uia-square-loader-color));

animation-name: uia-square-loader;
	animation-duration: var(--uia-square-loader-animation-duration, 4s);
	animation-direction: var(--uia-square-loader-animation-direction, alternate);
	animation-fill-mode: var(--uia-square-loader-animation-fill-mode, both);
	animation-timing-function: var(--uia-square-loader-animation-timing-function, ease-out);
	animation-iteration-count: var(--uia-square-loader-animation-iteration-count, infinite);
}

@keyframes uia-square-loader {

0%, 10%, 90%, 100%{
		transform: translate3d(0, 0, 0) scale(0);
	}

20%{
		transform: translate3d(0, 0, 0) scale(1);
	}

30%{
		transform: translate3d(-100%, -100%, 0) scale(1);
	}

40%{
		transform: translate3d(100%, -100%, 0) scale(1);
	}

50%{
		transform: translate3d(100%, 100%, 0) scale(1);
	}

60%{
		transform: translate3d(-100%, 100%, 0) scale(1);
	}

70%{
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce){

.uia-square-loader {
		--uia-aquare-loader-animation-duration: 14s;
	}
}

.uia-tennis-loader {
	--_uia-tennis-loader-size_default: 2.5rem;
	--_uia-tennis-loader-size: var(--uia-tennis-loader-size, var(--_uia-tennis-loader-size_default));
	--_uia-tennis-racket-thickness: var(--uia-tennis-racket-thickness, 3px);
	--_uia-tennis-loader-color: var(--uia-tennis-loader-color, #222);
	--_uia-tennis-loader-animation-duration_default: 0.65s;
	--_uia-tennis-loader-animation-timing-function_default: linear;

box-sizing: border-box;
	inline-size: var(--_uia-tennis-loader-size);
	block-size: var(--_uia-tennis-loader-size);

position: relative;
}

.uia-tennis-loader::before,
.uia-tennis-loader::after {
	content: "";
	inline-size: var(--_uia-tennis-racket-thickness);
	block-size: var(--uia-tennis-racket-height, 50%);
	background-color: var(--uia-tennis-loader-punch-color, var(--_uia-tennis-loader-color));

position: absolute;
	inset-block-start: 40%;

animation-name: uia-tennis-loader-punch;
	animation-duration: var(--uia-tennis-loader-punch-animation-duration, var(--_uia-tennis-loader-animation-duration_default));
	animation-direction: var(--uia-tennis-loader-punch-animation-direction, alternate);
	animation-fill-mode: var(--uia-tennis-loader-punch-animation-fill-mode, both);
	animation-timing-function: var(--uia-tennis-loader-punch-animation-timing-function, var(--_uia-tennis-loader-animation-timing-function_default));
	animation-iteration-count: var(--uia-tennis-loader-punch-animation-iteration-count, infinite);
}

.uia-tennis-loader::before {
	inset-inline-start: 0;
}

.uia-tennis-loader::after {
	inset-inline-end: 0;
	animation-delay: var(--uia-tennis-loader-punch-animation-delay, .1s);
}

@keyframes uia-tennis-loader-punch {

0%{
		transform: translate3d(0, -50%, 0);
	}

100%{
		transform: translate3d(0, 0, 0);
	}
}

.uia-tennis-loader__ball {
	--_uia-tennis-ball-size_default: 0.5rem;
	--_uia-tennis-loader-ball-size: var(--uia-tennis-loader-ball-size, var(--_uia-tennis-ball-size_default));

inline-size: var(--_uia-tennis-loader-ball-size);
	block-size: var(--_uia-tennis-loader-ball-size);
	border-radius: 50%;
	background-color: var(--uia-tennis-loader-ball-color, var(--_uia-tennis-loader-color));

position: absolute;
	inset-block-start: 40%;
	inset-inline-start: 0;

animation-name: uia-tennis-loader-ball;
	animation-duration: var(--uia-tennis-loader-ball-animation-duration, var(--_uia-tennis-loader-animation-duration_default));
	animation-direction: var(--uia-tennis-loader-ball-animation-direction, alternate);
	animation-fill-mode: var(--uia-tennis-loader-ball-animation-fill-mode, both);
	animation-timing-function: var(--uia-tennis-loader-ball-animation-timing-function, var(--_uia-tennis-loader-animation-timing-function_default));
	animation-iteration-count: var(--uia-tennis-loader-ball-animation-iteration-count, infinite);
}

@keyframes uia-tennis-loader-ball {

0%{
		transform: translate3d(0, calc(-1 * var(--_uia-tennis-loader-size) / 4), 0);
	}

50%{
		transform: translate3d(calc(var(--_uia-tennis-loader-size) / 2), 0, 0);
	}

100%{
		transform: translate3d(calc(var(--_uia-tennis-loader-size) - (2 * var(--_uia-tennis-racket-thickness)) - (var(--_uia-tennis-loader-ball-size) / 2)), calc(var(--_uia-tennis-loader-size) / 4), 0);
	}
}

@media (prefers-reduced-motion: reduce){

.uia-tennis-loader {
		--uia-tennis-loader-punch-animation-timing-function: 14s;
		--uia-tennis-loader-ball-animation-timing-function: 14s;
	}
}

.uia-flask-loader {
	--_uia-flask-loader-size_default: 2rem;
	--_uia-flask-loader-color: var(--uia-flask-loader-color, #222);

inline-size: var(--uia-flask-loader-size, var(--_uia-flask-loader-size_default));
	block-size: var(--uia-flask-loader-size, var(--_uia-flask-loader-size_default));
	position: relative;
	isolation: isolate;
	overflow: hidden;

display: grid;
	justify-items: center;
}

.uia-flask-loader::before,
.uia-flask-loader::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	background-color: var(--_uia-flask-loader-color);
}

.uia-flask-loader::before{
	inline-size: 50%;
	block-size: 44%;
	border-radius: 50%;
}

.uia-flask-loader::after{
	inline-size: 17%;
	block-size: 75%;
}

.uia-flask-loader__bubble {
	--_uia-flask-loader-bubble-size: var(--uia-flask-loader-bubble-size, 8px);
	
	position: absolute;
	inset: 0 0 60%;
}

.uia-flask-loader__bubble::before,
.uia-flask-loader__bubble::after{
	content: "";
	inline-size: var(--_uia-flask-loader-bubble-size);
	block-size: var(--_uia-flask-loader-bubble-size);
	border-radius: 50%;

background-color: var(--uia-flask-loader-bubble-color, var(--_uia-flask-loader-color));

animation: uia-flask-loader 3s infinite backwards;
	position: absolute;
	inset-block-end: 0;
	z-index: -1;
}

.uia-flask-loader__bubble::before {
	inset-inline-start: 48%;
}

.uia-flask-loader__bubble::after {
	inset-inline-start: 52%;
}

.uia-flask-loader__bubble:nth-child(1)::after {
	animation-delay: .5s;
}

.uia-flask-loader__bubble:nth-child(2)::before {
	animation-delay: .75s;
}

.uia-flask-loader__bubble:nth-child(2)::after {
	animation-delay: 1s;
}

.uia-flask-loader__bubble:nth-child(3)::before{
	animation-delay: 1.75s;
}

.uia-flask-loader__bubble:nth-child(3)::after{
	animation-delay: 2.25s;
}

.uia-flask-loader__bubble:nth-child(4)::before {
	animation-delay: 2.75s;
}

.uia-flask-loader__bubble:nth-child(4)::after {
	animation-delay: 3.5s;
}

@keyframes uia-flask-loader {

0% {
		transform: translate3d(-50%, 0, 0) scale(1);
		opacity: 1;
	}

85% {
		transform: translate3d(-50%, calc(-1 * var(--_uia-flask-loader-size_default)), 0) scale(0);
		opacity: 0;
	}

100% {
		transform: translate3d(-50%, calc(-1 * var(--_uia-flask-loader-size_default)), 0) scale(0);
		opacity: 1;
	}
}
/*
=====
DEMO STYLES
=====
*/

:root {
	--main-mode-color: #2e3444;
	--accent-mode-color: #e1e4e5;

--uia-clippy-loader-background-color: var(--main-mode-color);
	--uia-clippy-loader-stroke-color: var(--accent-mode-color);
	--uia-square-loader-color: var(--accent-mode-color);
	--uia-tennis-loader-color: var(--accent-mode-color);
	--uia-flask-loader-color: var(--accent-mode-color);
}

body {
	margin: 0;
	background-color: var(--main-mode-color);
	color: var(--accent-mode-color);
}

.page {
	box-sizing: border-box;
	min-block-size: 100dvh;
	padding: 3rem 2rem;

display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	gap: 3rem;
}

.page__loader {
	margin: auto;
	font-family: 'Cherry Bomb One', cursive;
	letter-spacing: 1px;
}

.page__flask {
	--uia-loader-canvas-size: 5rem;
	--uia-flask-loader-size: 4rem;
}

@media (width > 1200px) {

.page {
		grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
	}
}

Frontend Forever App