Revamping this, come back later (last updated 7/31/22)
dm me on instagram @cisfujo if you need anything

Higurashi When They Carrd

Home code resources tutorials


scroll

Skill bar
Copy and paste the code in the scroll box below into an embed, and edit any specifics. If you don't want the animation, just delete the keyframes.

<html>
<div class="container">
<div class="bar one" data-skill="One"></div>
<div class="bar back two" data-skill="Two"></div>
<div class="bar front three" data-skill="Three"></div>
</div>
</html>
<style>
body{
font-family: Helvetica, Arial, sans-serif;
}
.container{
width: 50%;
margin: 0 auto;
}
@keyframes load{
from {
width: 0%
}
}
@-webkit-keyframes load{
from {
width: 0%
}
}
@-moz-keyframes load{
from {
width: 0%
}
}
@-o-keyframes load{
from {
width: 0%
}
}
.bar{
background-color: #FFFFFF59;
padding: 0px;
border-radius: 1px;
margin-bottom: 5px;
font-size: 14px;
color: #FFF;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
}
.bar::before{
content: attr(data-skill);
background-color: #fcf403;
display: inline-block;
padding: 5px 0 5px 10px;
border-radius: inherit;
animation: load 2s 0s;
-webkit-animation: load 2s 0s;
-moz-animation: load 2s 0s;
-o-animation: load 2s 0s;
}
.bar.front::before{
background-color: #fc2803;
}
.bar.back::before{
background-color: #fcb103;
}
.bar.one::before{
width: calc(40% - 10px);
}
.bar.two::before{
width: calc(70% - 10px);
}
.bar.three::before{
width: calc(100% - 10px);
}


scroll