HealthBar

Developer
Helana Nosrat
Size
3,309 Kb
Views
54,648
  1. HealthBar Previews
  2. HealthBar HTML Codes
  3. HealthBar CSS Codes

How do I make an healthbar?

What is a healthbar? How do you make a healthbar? This script and codes were developed by Helana Nosrat on 12 August 2022, Friday.

HealthBar Previews
IQ Test

HealthBar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HealthBar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.2 21"> <style></style> <switch>
<!-- bar --> <g> <path class="st0" d="M64.7 4.7c3.2 0 3.9 3.1 3.9 6.3 0 3.1-.4 6.2-3.9 6.2H14.3c-3.4 0-3.9-3.1-3.9-6.2s.7-6.3 3.9-6.3h50.4z"/> <path class="st1" d="M64.7 4.1c3.2 0 3.9 3.1 3.9 6.3 0 3.1-.4 6.2-3.9 6.2H14.3c-3.4 0-3.9-3.1-3.9-6.2s.7-6.3 3.9-6.3h50.4z"/> <path class="st2" d="M63.6 5c2.9 0 3.6 2.5 3.6 5s-.4 4.9-3.6 4.9H15.4c-3.2 0-3.6-2.5-3.6-4.9 0-2.5.6-5 3.6-5h48.2z"/> <path class="st3" d="M14.2 16.1c-3.4 0-3.8-3-3.9-6v.3c0 3.1.4 6.2 3.9 6.2h50.4c3.4 0 3.9-3.1 3.9-6.2v-.3c0 3-.5 6-3.9 6H14.2z"/> <path class="st4" d="M63.6 13.9H15.3c-3 0-3.5-2.1-3.6-4.4v.5c0 2.5.4 4.9 3.6 4.9h48.2c3.2 0 3.6-2.5 3.6-4.9v-.5c0 2.3-.6 4.4-3.5 4.4z"/> <path class="st5" d="M11.8 10c0 2.5.4 5 3.6 5h48.2c3.2 0 3.6-2.5 3.6-4.9v-.4c-.1 2.3-.6 4.4-3.6 4.4H15.3c-3 0-3.5-2.1-3.6-4.4.1 0 .1.2.1.3z"/> <path class="st6" d="M66.9 11.4c-14.4 1.5-46.7 1.6-54.9.2.4 1.4 1.3 2.3 3.3 2.3h48.2c2.2 0 3-1 3.4-2.5z"/> <path class="st4" d="M15.3 5.4h48.2c2.7 0 3.5 2.1 3.6 4.3v-.2c-.1-2.2-.7-4.2-3-4.5H14.7c-2.3.3-2.9 2.3-3 4.5v.2c.2-2.2 1-4.3 3.6-4.3z"/> <path class="st5" d="M63.8 6.1c1.8 0 2.2 1.8 2.2 3.6s-.2 3.5-2.2 3.5H22.7c-2 0-2.2-1.8-2.2-3.5 0-1.8.4-3.6 2.2-3.6h41.1z"/> <path class="st4" d="M63.8 6.5c1.8 0 2.2 1.7 2.2 3.4s-.2 3.3-2.2 3.3H22.7c-2 0-2.2-1.7-2.2-3.3 0-1.7.4-3.4 2.2-3.4h41.1z"/> <path class="st6" d="M63.8 6.5c1.8 0 2.2 1.6 2.2 3.2s-.2 3.1-2.2 3.1H22.7c-2 0-2.2-1.6-2.2-3.1 0-1.6.4-3.2 2.2-3.2h41.1z"/> <path class="st0" d="M9.3 3.3l4-.5c.4-.1.9.1 1.2.3.3.3.6.6.6 1.1l.3 2.3 2.3-.3c.4-.1.9.1 1.2.3.3.3.6.6.6 1.1l.5 4c.1.4-.1.9-.3 1.2-.3.3-.6.6-1.1.6l-2.3.3.3 2.3c.1.4-.1.9-.3 1.2-.3.3-.6.6-1.1.6l-4 .5c-.4.1-.9-.1-1.2-.3-.3-.3-.6-.6-.6-1.1l-.3-2.3-2.3.3c-.4.1-.9-.1-1.2-.3-.3-.3-.6-.6-.6-1.1l-.5-4c-.1-.6 0-1 .2-1.3.3-.3.7-.6 1.1-.6l2.3-.3L7.8 5c0-.4.1-.8.4-1.1.2-.4.6-.6 1.1-.6zm3.8 1.6l-3.2.3.3 2.9.1 1-1 .1-2.8.4.4 3.1 2.9-.3 1-.1.1 1 .3 2.9 3.1-.4-.3-2.9-.1-1 1-.1 2.9-.3-.4-3.1-2.9.3-1 .1-.1-1-.3-2.9z"/> <path class="st3" d="M9.2 2.6l4-.5c.4-.1.9.1 1.2.3.3.3.6.7.6 1.1l.3 2.3 2.3-.3c.4-.1.9.1 1.2.3.3.3.6.6.6 1.1l.5 4c.1.4-.1.9-.3 1.2-.3.3-.6.6-1.1.6l-2.4.3.3 2.3c.1.4-.1.9-.3 1.2-.3.3-.6.6-1.1.6l-4 .5c-.4.1-.9-.1-1.2-.3-.3-.3-.6-.6-.6-1.1l-.3-2.3-2.3.3c-.4.1-.9-.1-1.2-.3-.3-.3-.6-.6-.6-1.1l-.5-4c0-.5.1-1 .4-1.3.2-.3.6-.5 1.1-.6L8 6.6l-.2-2.2c-.1-.5.1-.9.3-1.2.3-.4.7-.6 1.1-.6zM13 4.2l-3.1.4.3 2.9.1 1-1 .1-2.9.3.4 3.1 2.9-.3 1-.1.1 1 .3 2.9 3.1-.4-.3-2.9-.1-1 1-.1 2.9-.3-.4-3.1-2.8.3-1 .1-.1-1-.4-2.9z"/> <path class="st1" d="M9.2 2.6l4-.5c.4-.1.9.1 1.2.3.3.3.5.6.6 1.1l.2 1.7.1.6 2.3-.3c.4-.1.9.1 1.2.3.3.3.5.6.6 1.1l.4 3.4c0 .4-.1.9-.3 1.2-.3.3-.6.6-1.1.6l-2.4.3.1.6.2 1.7c0 .4-.1.9-.3 1.2-.3.3-.6.6-1.1.6l-4 .5c-.4.1-.9-.1-1.2-.3-.3-.3-.5-.6-.6-1.1l-.2-1.7-.1-.6-2.3.3c-.4.1-.9-.1-1.2-.3-.3-.3-.5-.6-.6-1.1l-.4-3.5c0-.4.1-.9.3-1.2.3-.3.7-.5 1.2-.6L8 6.6V6l-.2-1.6c0-.4.1-.9.3-1.2.3-.4.7-.6 1.1-.6zm3.7 1L9.8 4l.1.6.3 2.9v.4l-1 .1-2.8.3.1.6.3 2.5v.6l2.9-.3 1-.1.1 1 .3 2.3.1.6 3.1-.4-.1-.6-.3-2.3-.1-1 1-.1 2.9-.3-.1-.6-.3-2.5V7l-2.9.3-1 .1V7L13 4.2l-.1-.6z"/> <path class="st7" d="M9.3 3.3l4-.5c.3 0 .6.2.7.5l.4 3.3 3.3-.4c.3 0 .6.2.7.5l.5 4c0 .3-.2.6-.5.7l-3.3.4.4 3.3c0 .3-.2.6-.5.7l-4 .5c-.3 0-.6-.2-.7-.5l-.4-3.3-3.3.4c-.3 0-.6-.2-.7-.5l-.5-4c0-.3.2-.6.5-.7l3.3-.4L8.8 4c-.1-.3.2-.6.5-.7z"/> <path class="st8" d="M9.3 3.3l4-.5c.3 0 .6.2.7.5l.3 2.5.1.8 3.3-.4c.3 0 .6.2.7.5l.4 3.2c0 .3-.2.6-.5.7l-3.5.4.1.8.3 2.5c0 .3-.2.6-.5.7l-4 .5c-.3 0-.6-.2-.7-.5l-.3-2.5-.1-.8-3.3.3c-.3 0-.6-.2-.7-.5l-.3-3.2c0-.3.2-.6.5-.7l3.3-.4-.1-.7L8.8 4c-.1-.3.2-.6.5-.7z"/> <path class="st9" d="M9.3 3.3l4-.5c.3 0 .6.2.7.5l.3 2.5.1.6v.2l3.3-.4c.3 0 .6.2.7.5l.3 3c0 .3-.2.6-.5.7l-3.3.4v.2l.1.8.3 2.3c0 .3-.2.6-.5.7l-4 .5c-.3 0-.6-.2-.7-.5l-.3-2.3-.1-.8v-.2l-3.3.4c-.3 0-.6-.2-.7-.5l-.3-3c0-.3.2-.6.5-.7l3.3-.4v-.2L9 6.5 8.8 4c-.1-.3.2-.6.5-.7z"/> <path class="st10" d="M18.3 7.2l.3 2.6c0 .3-.2.6-.5.7l-3.3.4v.2l.1.8.3 2.3c0 .3-.2.6-.5.7l-4 .5c-.3 0-.6-.2-.7-.5l-.1-1.3c.3-.2.6-.4 1-.6.8-.5 1.5-1 2.3-1.5 1.6-1.1 3.1-2.3 4.2-3.3.3-.4.6-.7.9-1z"/> <path class="st11" d="M5.7 11.3c0 .6.1.8 0 0l-.3-3c0-.3.2-.6.5-.7l3.3-.4L8.8 4c0-.3.2-.6.5-.7l4-.5c.3 0 .6.2.7.5l.3 2.5c-.3.2-.6.4-1 .6-.8.5-1.6 1-2.4 1.6-.2.1-.3.2-.5.4l-.1.1c-1.3.9-2.5 1.9-3.5 2.8l-.6.6c-.3-.2-.5-.4-.5-.6z"/> <g> <path class="st7" d="M21.2 9.6c0-1.6.2-2.8 2.3-2.8H63c2.1 0 2.3 1.1 2.3 2.8 0 1.5-.3 2.8-2.3 2.8H23.5c-2 0-2.3-1.2-2.3-2.8z"/> <path class="st8" d="M21.2 9.3c.1-1.3.4-2.3 2.3-2.3H63c1.9 0 2.3.9 2.3 2.3-.1 1.3-.5 2.3-2.3 2.3H23.5c-1.8.1-2.2-.9-2.3-2.3z"/> <path class="st10" d="M21.2 9.2c.1-1.4.4-2.3 2.3-2.3H63c1.9 0 2.3.9 2.3 2.3-.1 1.3-.5 2.3-2.3 2.3H23.5c-1.8 0-2.2-1-2.3-2.3z"/> <path class="st9" d="M21.2 9.2c.1-.9.4-1.5 2.3-1.5H63c1.9 0 2.3.6 2.3 1.5-.1.9-.5 1.6-2.3 1.6H23.5c-1.8 0-2.2-.7-2.3-1.6z"/> <path class="st8" d="M65.3 9.2zM23.5 7.6c-1.7 0-2.2.5-2.3 1.2v.3c.1-1.4.4-2.3 2.3-2.3H63c1.9 0 2.3.9 2.3 2.3v-.3c-.1-.7-.6-1.2-2.3-1.2H23.5z"/> </g> </g> </switch>
</svg>
</body>
</html>

HealthBar - Script Codes CSS Codes

body { background-color: #472b34; margin: 0;
}
.st0,
.st1,
.st2,
.st3,
.st4,
.st5 { fill-rule: evenodd; clip-rule: evenodd
}
.st0 { opacity: .2
}
.st1,
.st2,
.st3,
.st4,
.st5 { fill: #fff
}
.st2,
.st3,
.st4,
.st5 { fill: #fec230
}
.st3,
.st4,
.st5 { fill: #e6e6e6
}
.st4,
.st5 { fill: #ffe558
}
.st5 { fill: #d49800
}
.st10,
.st11,
.st12,
.st6,
.st7,
.st8,
.st9 { fill-rule: evenodd; clip-rule: evenodd; fill: #ffb700
}
.st10,
.st11,
.st12,
.st7,
.st8,
.st9 { fill: #be005b
}
.st10,
.st11,
.st12,
.st8,
.st9 { fill: #ff5dab
}
.st10,
.st11,
.st12,
.st9 { fill: #ff208f
}
.st10,
.st11,
.st12 { fill: #fe007a
}
.st11,
.st12 { fill: #ff3d9a
}
.st12 { fill: #ccc
}
.st13,
.st14,
.st15,
.st16,
.st17,
.st18 { fill-rule: evenodd; clip-rule: evenodd; fill: #999
}
.st14,
.st15,
.st16,
.st17,
.st18 { fill: #1fd2ff
}
.st15,
.st16,
.st17,
.st18 { fill: #00b1dd
}
.st16,
.st17,
.st18 { fill: #007b9a
}
.st17,
.st18 { fill: #00c9fc
}
.st18 { fill: #00aad4
}
svg { width: 150px; height: 100%; margin-left: 25%; margin-top: 100px; motion-path: path('M66.8 50c3.2 0 3.9 3.1 3.9 6.3 0 3.1-.4 6.2-3.9 6.2H16.4c-3.4 0-3.9-3.1-3.9-6.2s.7-6.3 3.9-6.3h50.4z');
/* animation: motionpathguy 10s linear infinite both; */
}
/* @keyframes motionpathguy { 100% { motion-offset: 100%; }
} */
/* .contents:hover { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; width:100%;
} */
.st4,
.st6,
.st7,
.st8,
.st9,
.st10 { transition: all .2s ease-in-out; }
/* .st4:hover, */
.st6:hover,
.st7:hover,
.st8:hover,
.st9:hover,
.st10:hover { transform: scale(1.1); }
HealthBar - Script Codes
HealthBar - Script Codes
Home Page Home
Developer Helana Nosrat
Username HelanaN
Uploaded August 12, 2022
Rating 3
Size 3,309 Kb
Views 54,648
Do you need developer help for HealthBar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Helana Nosrat (HelanaN) Script Codes
Name
Analytics Template
Duke Template
Emma Template
Email Image Carousel
Subscribe Form 1
Ipsy Template
Drag and Drop Flora Editor
Retro Website Example
Pinterest Board
A Pen by Helana Nosrat
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!