Last active
January 23, 2024 20:30
-
-
Save spariva/abb63bcf7561b5359019c2053b61365f to your computer and use it in GitHub Desktop.
Loading animation bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": 3, | |
"mappings": "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", | |
"sources": ["gigante.scss","mixins.scss"], | |
"names": [], | |
"file": "gigante.css" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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"); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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 ); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
D:\Perfiles\at4daw2\Documents\GitHub\DAW2\Interfaz\Animaciones\Gigante Azul\tree.png | |
#Download your own png in order to make it work =) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.