Success meters

Developer
Elyse Holladay
Size
3,134 Kb
Views
6,072
  1. Success meters Previews
  2. Success meters HTML Codes
  3. Success meters CSS Codes

How do I make an success meters?

What is a success meters? How do you make a success meters? This script and codes were developed by Elyse Holladay on 27 December 2022, Tuesday.

Success meters Previews
IQ Test

Success meters - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>success meters</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="circle" data-percent="5"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="10"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="15"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="20"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="25"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="30"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="35"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="40"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="45"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="50"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="55"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="60"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="65"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="70"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="75"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="80"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="85"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="90"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="95"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
<div class="circle" data-percent="100"> <svg class="circleFill"> <circle cx="43" cy="43" r="39"></circle> </svg> <svg class="circleTrack"> <circle cx="43" cy="43" r="39"></circle> </svg>
</div>
</body>
</html>

Success meters - Script Codes CSS Codes

svg.circleFill { animation-duration: 2.25s; animation-timing-function: ease-in; animation-fill-mode: forwards; stroke-dashoffset: 322px;
}
[data-percent="0"].circle:after { content: "0%";
}
[data-percent="0"] svg.circleFill { animation-name: ring-0; stroke: #ea4545;
}
@keyframes ring-0 { to { stroke-dashoffset: 322px; }
}
[data-percent="5"].circle:after { content: "5%";
}
[data-percent="5"] svg.circleFill { animation-name: ring-1; stroke: #ea4545;
}
@keyframes ring-1 { to { stroke-dashoffset: 309.75px; }
}
[data-percent="10"].circle:after { content: "10%";
}
[data-percent="10"] svg.circleFill { animation-name: ring-2; stroke: #ea4545;
}
@keyframes ring-2 { to { stroke-dashoffset: 297.5px; }
}
[data-percent="15"].circle:after { content: "15%";
}
[data-percent="15"] svg.circleFill { animation-name: ring-3; stroke: #ea4545;
}
@keyframes ring-3 { to { stroke-dashoffset: 285.25px; }
}
[data-percent="20"].circle:after { content: "20%";
}
[data-percent="20"] svg.circleFill { animation-name: ring-4; stroke: #ea4545;
}
@keyframes ring-4 { to { stroke-dashoffset: 273px; }
}
[data-percent="25"].circle:after { content: "25%";
}
[data-percent="25"] svg.circleFill { animation-name: ring-5; stroke: #ea4545;
}
@keyframes ring-5 { to { stroke-dashoffset: 260.75px; }
}
[data-percent="30"].circle:after { content: "30%";
}
[data-percent="30"] svg.circleFill { animation-name: ring-6; stroke: #ea4545;
}
@keyframes ring-6 { to { stroke-dashoffset: 248.5px; }
}
[data-percent="35"].circle:after { content: "35%";
}
[data-percent="35"] svg.circleFill { animation-name: ring-7; stroke: #e7b120;
}
@keyframes ring-7 { to { stroke-dashoffset: 236.25px; }
}
[data-percent="40"].circle:after { content: "40%";
}
[data-percent="40"] svg.circleFill { animation-name: ring-8; stroke: #e7b120;
}
@keyframes ring-8 { to { stroke-dashoffset: 224px; }
}
[data-percent="45"].circle:after { content: "45%";
}
[data-percent="45"] svg.circleFill { animation-name: ring-9; stroke: #e7b120;
}
@keyframes ring-9 { to { stroke-dashoffset: 211.75px; }
}
[data-percent="50"].circle:after { content: "50%";
}
[data-percent="50"] svg.circleFill { animation-name: ring-10; stroke: #e7b120;
}
@keyframes ring-10 { to { stroke-dashoffset: 199.5px; }
}
[data-percent="55"].circle:after { content: "55%";
}
[data-percent="55"] svg.circleFill { animation-name: ring-11; stroke: #e7b120;
}
@keyframes ring-11 { to { stroke-dashoffset: 187.25px; }
}
[data-percent="60"].circle:after { content: "60%";
}
[data-percent="60"] svg.circleFill { animation-name: ring-12; stroke: #e7b120;
}
@keyframes ring-12 { to { stroke-dashoffset: 175px; }
}
[data-percent="65"].circle:after { content: "65%";
}
[data-percent="65"] svg.circleFill { animation-name: ring-13; stroke: #e7b120;
}
@keyframes ring-13 { to { stroke-dashoffset: 162.75px; }
}
[data-percent="70"].circle:after { content: "70%";
}
[data-percent="70"] svg.circleFill { animation-name: ring-14; stroke: #e7b120;
}
@keyframes ring-14 { to { stroke-dashoffset: 150.5px; }
}
[data-percent="75"].circle:after { content: "75%";
}
[data-percent="75"] svg.circleFill { animation-name: ring-15; stroke: #e7b120;
}
@keyframes ring-15 { to { stroke-dashoffset: 138.25px; }
}
[data-percent="80"].circle:after { content: "80%";
}
[data-percent="80"] svg.circleFill { animation-name: ring-16; stroke: #10b48a;
}
@keyframes ring-16 { to { stroke-dashoffset: 126px; }
}
[data-percent="85"].circle:after { content: "85%";
}
[data-percent="85"] svg.circleFill { animation-name: ring-17; stroke: #10b48a;
}
@keyframes ring-17 { to { stroke-dashoffset: 113.75px; }
}
[data-percent="90"].circle:after { content: "90%";
}
[data-percent="90"] svg.circleFill { animation-name: ring-18; stroke: #10b48a;
}
@keyframes ring-18 { to { stroke-dashoffset: 101.5px; }
}
[data-percent="95"].circle:after { content: "95%";
}
[data-percent="95"] svg.circleFill { animation-name: ring-19; stroke: #10b48a;
}
@keyframes ring-19 { to { stroke-dashoffset: 89.25px; }
}
[data-percent="100"].circle:after { content: "100%";
}
[data-percent="100"] svg.circleFill { animation-name: ring-20; stroke: #10b48a;
}
@keyframes ring-20 { to { stroke-dashoffset: 77px; }
}
body { font-family: "Helvetica";
}
.circle { position: relative; width: 85px; height: 85px; margin: 20px auto; float: left;
}
.circle:after { content: "hi"; font-size: 24px; position: absolute; top: 30%; left: 23%;
}
.circle svg { position: absolute; width: 100%; height: 100%;
}
.circle svg.circleFill { z-index: 1; fill: none; stroke-width: 6; stroke-dasharray: 322; transform: rotate(-115deg);
}
.circle svg.circleTrack { z-index: 0; fill: none; stroke-width: 6; top: -1px; stroke: #ddd;
}
Success meters - Script Codes
Success meters - Script Codes
Home Page Home
Developer Elyse Holladay
Username elyseholladay
Uploaded December 27, 2022
Rating 3
Size 3,134 Kb
Views 6,072
Do you need developer help for Success meters?

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!

Elyse Holladay (elyseholladay) Script Codes
Name
Notification banners
A Pen by elyse holladay
3 Box-Sizing
Sassy Buttons
Finished Grid Example
Class Chaining
Basic Fluid Grid Example
Start a new Grid Example
X Floating Examples
4 Basic Naming with Classes
Create amazing love letters 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!