Loading animation bar

gigante.css

:root {
  --main-color: rgb(0, 115, 138);
  --main-color-dark: rgb(0, 98, 118);
  --second-color: rgb(193, 108, 35);
  --second-color-dark: rgb(171, 103, 38);
  --background-color: rgb(244, 152, 152);
  --background-sky-color: rgb(148, 88, 159);
  --background-green-color: rgba(53, 211, 164, 0.954);
  --unit: 0.85vw;
  --time: 1.8s; }

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: var(--background-color);
  background: var(--background-color);
  background-image: -moz-linear-gradient(bottom, var(--background-color) 0%, var(--background-sky-color) 100%);
  background-image: -webkit-linear-gradient(bottom, var(--background-color) 0%, var(--background-sky-color) 100%);
  background-image: linear-gradient(to top, var(--background-color) 0%, var(--background-sky-color) 75%); }

.ground {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc(96 * var(--unit));
  bottom: calc(6 * var(--unit));
  height: calc(2 * var(--unit));
  background: var(--background-green-color);
  background-image: -moz-linear-gradient(bottom, var(--background-green-color) 0%, var(--second-color-dark) 100%);
  background-image: -webkit-linear-gradient(bottom, var(--background-green-color) 0%, var(--second-color-dark) 100%);
  background-image: linear-gradient(to bottom, var(--background-green-color) 0%, var(--second-color-dark) 75%);
  background-color: var(--second-color-dark);
  border-radius: calc(2 * var(--unit)); }

.dude {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc(28 * var(--unit));
  bottom: calc(20 * var(--unit)); }

.upper-body {
  position: relative;
  left: 0;
  bottom: 0;
  width: calc(28 * var(--unit));
  height: calc(36 * var(--unit));
  animation-name: shuffle;
  animation-duration: calc(0.5 * var(--time));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: calc(-0.25 * var(--time)); }

.melon {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(8 * var(--unit));
  height: calc(8 * var(--unit));
  background-color: var(--main-color);
  border-radius: calc(0.5 * var(--unit)) calc(0.5 * var(--unit)) 50% 50%;
  animation-name: nod;
  animation-duration: calc(1 * var(--time));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-delay: calc(-1.5 * var(--time));
  transform-origin: 25% 75%; }

.gut {
  position: absolute;
  width: calc(28 * var(--unit));
  height: calc(28 * var(--unit));
  top: calc(9 * var(--unit));
  background-color: var(--main-color-dark);
  background-image: radial-gradient(closest-corner at 30% 30%, var(--main-color) 20%, var(--main-color-dark) 160%);
  border-radius: 50%;
  z-index: 2; }

.arm-left,
.arm-right {
  position: absolute;
  left: 60%;
  top: 35%;
  width: calc(7 * var(--unit));
  height: calc(14 * var(--unit));
  background-color: var(--main-color);
  transform-origin: calc(3.5 * var(--unit)) calc(3.5 * var(--unit));
  border-radius: calc(3.5 * var(--unit));
  animation-name: swing;
  animation-duration: calc(0.5 * var(--time));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate; }

.arm-right {
  animation-delay: 0s;
  z-index: 3; }

.arm-left {
  z-index: 1;
  animation-direction: alternate-reverse; }

.arm-left::after,
.arm-right::after {
  content: "";
  position: absolute;
  width: calc(15 * var(--unit));
  height: calc(6 * var(--unit));
  left: 0;
  bottom: 0;
  background-color: var(--main-color-light);
  transform-origin: calc(3 * var(--unit)) calc(3 * var(--unit));
  border-radius: calc(3 * var(--unit)) calc(0.5 * var(--unit)) calc(3 * var(--unit)) calc(3 * var(--unit));
  animation-name: swing-swing;
  animation-duration: calc(0.5 * var(--time));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
  animation-delay: calc(-0.5 * var(--time)); }

.arm-left::after {
  background-color: var(--main-color-dark);
  background-image: linear-gradient(90deg, var(--main-color-dark) 64%, var(--main-color) 64%, var(--main-color) 72%, var(--main-color-dark) 72%);
  animation-delay: calc(-1 * var(--time)); }

.arm-right::after {
  background-color: var(--main-color);
  background: linear-gradient(90deg, var(--main-color) 64%, var(--main-color-dark) 64%, var(--main-color-dark) 72%, var(--main-color) 72%); }

.foot-left,
.foot-right {
  width: calc(12 * var(--unit));
  height: calc(5 * var(--unit));
  position: absolute;
  left: calc(1 * var(--unit));
  top: calc(41 * var(--unit));
  animation-name: step;
  animation-duration: calc(1 * var(--time));
  animation-iteration-count: infinite;
  border-radius: calc(3 * var(--unit)) 50% calc(0.5 * var(--unit)) calc(0.5 * var(--unit));
  transform-origin: 25% 50%; }

.foot-left {
  background-color: var(--main-color-dark); }

.foot-right {
  background-color: var(--main-color);
  animation-delay: calc(-0.5 * var(--time)); }

.jump {
  animation-name: jump;
  animation-duration: calc(1 * var(--time));
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-delay: calc(0.2 * var(--time));
  animation-fill-mode: backwards; }

.tree {
  position: absolute;
  left: 0;
  right: calc(-90 * var(--unit));
  margin-left: auto;
  margin-right: auto;
  width: calc(14 * var(--unit));
  bottom: calc(7 * var(--unit));
  height: calc(16 * var(--unit));
  animation-name: treeMoving;
  animation-duration: calc(3 * var(--time));
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: calc(1 * var(--time)); }

.loading-bar {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc(96 * var(--unit));
  bottom: calc(6 * var(--unit));
  height: calc(4 * var(--unit));
  background: var(--background-green-color);
  background-image: -moz-linear-gradient(bottom, var(--background-green-color) 0%, var(--main-color-dark) 100%);
  background-image: -webkit-linear-gradient(bottom, var(--background-green-color) 0%, var(--main-color-dark) 100%);
  background-image: linear-gradient(to bottom, var(--background-green-color) 0%, var(--main-color-dark) 75%);
  background-color: var(--second-color-dark);
  border-radius: calc(2 * var(--unit));
  animation-name: barLoading;
  animation-duration: calc(10 * var(--time));
  animation-iteration-count: 2;
  animation-timing-function: linear;
  animation-delay: calc(-10 * var(--time)); }

@keyframes step {
  0% {
    transform: translateX(0px) translateY(0px);
    animation-timing-function: ease-out; }
  25% {
    transform: translateX(calc(6 * var(--unit))) translateY(calc(-4.5 * var(--unit))) rotate(20deg);
    animation-timing-function: ease-in-out; }
  50% {
    transform: translateX(calc(18 * var(--unit))) translateY(0px);
    animation-timing-function: ease-in-out; }
  100% {
    transform: translateX(0px) translateY(0px);
    animation-timing-function: ease-in-out; } }
@keyframes shuffle {
  0%,
	50%,
	100% {
    transform: translateY(0px); }
  25%,
	75% {
    transform: translateY(calc(-3 * var(--unit))); } }
@keyframes nod {
  0%,
	50%,
	100% {
    transform: translateY(0px) rotate(3deg); }
  25%,
	75% {
    transform: translateY(calc(1.5 * var(--unit))) rotate(-5deg); } }
@keyframes swing {
  0% {
    transform: rotate(50deg); }
  100% {
    transform: rotate(-50deg); } }
@keyframes swing-swing {
  0% {
    transform: rotate(85deg); }
  100% {
    transform: rotate(5deg); } }
@keyframes jump {
  0% {
    transform: translateY(0px); }
  30% {
    transform: translateY(calc(-12 * var(--unit))) translateX(calc(2 * var(--unit))); }
  35% {
    transform: translateY(calc(-12 * var(--unit))) translateX(calc(2 * var(--unit))); }
  60% {
    transform: translateY(0px) translateX(calc(-8 * var(--unit))); }
  100% {
    transform: translateY(0px) translateX(0px); } }
@keyframes treeMoving {
  0% {
    transform: translateX(0px); }
  100% {
    transform: translateX(calc(-100 * var(--unit))); } }
@keyframes barLoading {
  0% {
    transform: translateX(calc(-100 * var(--unit))); }
  100% {
    transform: translateX(0px); } }

/*# sourceMappingURL=gigante.css.map */

gigante.css.map

{
"version": 3,
"mappings": "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",
"sources": ["gigante.scss","mixins.scss"],
"names": [],
"file": "gigante.css"
}

gigante.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Gigante Azul</title>
        <link rel="stylesheet" href="gigante.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <script defer src="jump.js"></script>
    </head>
    <body>
        <p>Loading...</p>
        <div class="background">
            <div class="dude" id="gigant">
                <div class="upper-body">
                    <div class="melon">''^.^</div>
                    <div class="gut"></div>
                    <div class="arm-left"></div>
                    <div class="arm-right"></div>
                </div>
                <div class="foot-left"></div>
                <div class="foot-right"></div>
            </div>
            <img src="tree.png" alt="tree" class="tree">
            <div class="loading-bar"></div>
            <div class="progress" style="height: 10px">
                <div class="ground progress-bar progress-bar-striped bg-success progress-bar-animated"> Loading...</div>
            </div>
        </div>
    </body>
</html>

gigante.scss

:root {
	--main-color: rgb(0, 115, 138);
	--main-color-dark: rgb(0, 98, 118);
	--second-color: rgb(193, 108, 35);
	--second-color-dark: rgb(171, 103, 38);
	--background-color: rgb(244, 152, 152);
	--background-sky-color: rgb(148, 88, 159);
	--background-green-color: rgba(53, 211, 164, 0.954);
	--unit: 0.85vw;
	--time: 1.8s;
}

@import "mixins";

body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background-color: var(--background-color);
	@include degradadoDual(
		var(--background-color),
		var(--background-sky-color),
		top
	);
}

.ground {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: calc(96 * var(--unit));
	bottom: calc(6 * var(--unit));
	height: calc(2 * var(--unit));
	//no utilizo al final este degradado porque lo como con la barra de bootrstrap
	@include degradadoDual(
		var(--background-green-color),
		var(--second-color-dark),
		bottom
	);
	background-color: var(--second-color-dark);
	border-radius: calc(2 * var(--unit));
}

.dude {
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: calc(28 * var(--unit));
	bottom: calc(20 * var(--unit));
}

.upper-body {
	position: relative;
	left: 0;
	bottom: 0;
	width: calc(28 * var(--unit));
	height: calc(36 * var(--unit));
	animation-name: shuffle;
	animation-duration: calc(0.5 * var(--time));
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-delay: calc(-0.25 * var(--time));
}

.melon {
	position: absolute;
	right: 0;
	top: 0;
	width: calc(8 * var(--unit));
	height: calc(8 * var(--unit));
	background-color: var(--main-color);
	border-radius: calc(0.5 * var(--unit)) calc(0.5 * var(--unit)) 50% 50%;
	animation-name: nod;
	animation-duration: calc(1 * var(--time));
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: calc(-1.5 * var(--time));
	transform-origin: 25% 75%;
}

.gut {
	position: absolute;
	width: calc(28 * var(--unit));
	height: calc(28 * var(--unit));
	top: calc(9 * var(--unit));
	background-color: var(--main-color-dark);
	background-image: radial-gradient(
		closest-corner at 30% 30%,
		var(--main-color) 20%,
		var(--main-color-dark) 160%
	);
	border-radius: 50%;
	z-index: 2;
}

.arm-left,
.arm-right {
	position: absolute;
	left: 60%;
	top: 35%;
	width: calc(7 * var(--unit));
	height: calc(14 * var(--unit));
	background-color: var(--main-color);
	transform-origin: calc(3.5 * var(--unit)) calc(3.5 * var(--unit));
	border-radius: calc(3.5 * var(--unit));
	animation-name: swing;
	animation-duration: calc(0.5 * var(--time));
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

.arm-right {
	animation-delay: 0s;
	z-index: 3;
}
.arm-left {
	z-index: 1;
	animation-direction: alternate-reverse;
}

.arm-left::after,
.arm-right::after {
	content: "";
	position: absolute;
	width: calc(15 * var(--unit));
	height: calc(6 * var(--unit));
	left: 0;
	bottom: 0;
	background-color: var(--main-color-light);
	transform-origin: calc(3 * var(--unit)) calc(3 * var(--unit));
	border-radius: calc(3 * var(--unit)) calc(0.5 * var(--unit))
		calc(3 * var(--unit)) calc(3 * var(--unit));
	animation-name: swing-swing;
	animation-duration: calc(0.5 * var(--time));
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate-reverse;
	animation-delay: calc(-0.5 * var(--time));
}

.arm-left::after {
	background-color: var(--main-color-dark);
	background-image: linear-gradient(
		90deg,
		var(--main-color-dark) 64%,
		var(--main-color) 64%,
		var(--main-color) 72%,
		var(--main-color-dark) 72%
	);
	animation-delay: calc(-1 * var(--time));
}

.arm-right::after {
	background-color: var(--main-color);
	background: linear-gradient(
		90deg,
		var(--main-color) 64%,
		var(--main-color-dark) 64%,
		var(--main-color-dark) 72%,
		var(--main-color) 72%
	);
}

.foot-left,
.foot-right {
	width: calc(12 * var(--unit));
	height: calc(5 * var(--unit));
	position: absolute;
	left: calc(1 * var(--unit));
	top: calc(41 * var(--unit));
	animation-name: step;
	animation-duration: calc(1 * var(--time));
	animation-iteration-count: infinite;
	border-radius: calc(3 * var(--unit)) 50% calc(0.5 * var(--unit))
		calc(0.5 * var(--unit));
	transform-origin: 25% 50%;
}

.foot-left {
	background-color: var(--main-color-dark);
}

.foot-right {
	background-color: var(--main-color);
	animation-delay: calc(-0.5 * var(--time));
}

.jump{
	animation-name: jump;
	animation-duration: calc(1 * var(--time));
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-delay: calc(0.2 * var(--time));
	animation-fill-mode: backwards;
}

.tree{
	position: absolute;
	left: 0;
	right: calc(-90 * var(--unit));
	margin-left: auto;
	margin-right: auto;
	width: calc(14 * var(--unit));
	bottom: calc(7 * var(--unit));
	height: calc(16 * var(--unit));
	animation-name: treeMoving;
	animation-duration: calc(3 * var(--time));
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: calc(1 * var(--time));
}

.loading-bar{
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: calc(96 * var(--unit));
	bottom: calc(6 * var(--unit));
	height: calc(4 * var(--unit));
	@include degradadoDual(
		var(--background-green-color),
		var(--main-color-dark),
		bottom
	);
	background-color: var(--second-color-dark);
	border-radius: calc(2 * var(--unit));
	animation-name: barLoading;
	animation-duration: calc(10 * var(--time));
	animation-iteration-count: 2;
	animation-timing-function: linear;
	animation-delay: calc(-10 * var(--time));
}


@keyframes step {
	0% {
		transform: translateX(0px) translateY(0px);
		animation-timing-function: ease-out;
	}
	25% {
		transform: translateX(calc(6 * var(--unit)))
			translateY(calc(-4.5 * var(--unit))) rotate(20deg);
		animation-timing-function: ease-in-out;
	}
	50% {
		transform: translateX(calc(18 * var(--unit))) translateY(0px);
		animation-timing-function: ease-in-out;
	}
	100% {
		transform: translateX(0px) translateY(0px);
		animation-timing-function: ease-in-out;
	}
}

@keyframes shuffle {
	0%,
	50%,
	100% {
		transform: translateY(0px);
	}
	25%,
	75% {
		transform: translateY(calc(-3 * var(--unit)));
	}
}

@keyframes nod {
	0%,
	50%,
	100% {
		transform: translateY(0px) rotate(3deg);
	}
	25%,
	75% {
		transform: translateY(calc(1.5 * var(--unit))) rotate(-5deg);
	}
}

@keyframes swing {
	0% {
		transform: rotate(50deg);
	}
	100% {
		transform: rotate(-50deg);
	}
}

@keyframes swing-swing {
	0% {
		transform: rotate(85deg);
	}
	100% {
		transform: rotate(5deg);
	}
}

@keyframes jump {
	0% {
		transform: translateY(0px);
	}
	30% {
		transform: translateY(calc(-12 * var(--unit))) translateX(calc(2 * var(--unit)));
	}
	35% {
		transform: translateY(calc(-12 * var(--unit))) translateX(calc(2 * var(--unit)));
	}
	60% {
		transform: translateY(0px) translateX(calc(-8 * var(--unit)));
	}
	100% {
		transform: translateY(0px) translateX(0px);
	}
}

@keyframes treeMoving {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(calc(-100 * var(--unit)));
	}
}

@keyframes barLoading {
	0% {
		transform: translateX(calc(-100 * var(--unit)));
	}
	100% {
		transform: translateX(0px);
	}
}

jump.js

//When the user press the space bar, the character jumps, adding a class with the animation jump. 
//Consts:
const gigant = document.getElementById("gigant");


function jump(k) {
    if (k.keyCode === 32) {
        document.getElementById("gigant").classList.toggle("jump");
    }
}

//Event listener:
document.addEventListener("keypress", jump);


document.addEventListener("beforeunload", (event) => {
    event.preventDefault();
    alert("No te vayas :( que el gigante casi ha llegado a su destino");
});

mixins.scss

//Solo iría en la dirección deseada si no usa las versiones antiguas de navegadores.
@mixin degradadoDual($color1, $color2, $direction) {
    background: $color1;
    background-image: -moz-linear-gradient(bottom, $color1 0%, $color2 100%);
    background-image: -webkit-linear-gradient(bottom, $color1 0%, $color2 100%);
    background-image: linear-gradient(to $direction, $color1 0%, $color2 75%);
    // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= $color1, endColorstr= $color2,GradientType=1 );
}

tree.png

D:\Perfiles\at4daw2\Documents\GitHub\DAW2\Interfaz\Animaciones\Gigante Azul\tree.png
#Download your own png in order to make it work =)

This animated loading bar is created by me, modifying a Kristian Effors' animation https://codepen.io/Ekfors/pen/BaYWeKp , I also created a basic javascritp code where the user can make the animated person to jump. And added my own styles, mixins and a bit of Bootstrap.