Progression Steps

Developer
Jim Savage
Size
2,503 Kb
Views
12,144
  1. Progression Steps Previews
  2. Progression Steps HTML Codes
  3. Progression Steps CSS Codes

How do I make an progression steps?

Simple pen to show progressions steps. Using minimum markup and flexbox. Colours & Sizing are easily confogurbale.. What is a progression steps? How do you make a progression steps? This script and codes were developed by Jim Savage on 19 November 2022, Saturday.

Progression Steps Previews
IQ Test

Progression Steps - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Progression Steps</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="steps">
<!-- you can add as many steps as you like, flexbox will evenly space them -->	<span>1</span>	<span class="active">2</span>	<span>3</span>	<span>4</span>
<span>5</span>
</div>
</body>
</html>

Progression Steps - Script Codes CSS Codes

body { background-color: #292038; margin: 50px; color: white;
}
.steps { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; margin-bottom: 1rem;
}
.steps:before { display: inline-block; content: ""; border-bottom: solid 10px #EE2677; position: absolute; top: calc(50% - 5px); left: 1.5rem; right: 1.5rem; z-index: 0;
}
.steps span { display: block; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: 50%; background-color: #EE2677;
}
.steps span.active { width: 4rem; height: 4rem; line-height: 4rem; background-color: #EBB3A9;
}
Progression Steps - Script Codes
Progression Steps - Script Codes
Home Page Home
Developer Jim Savage
Username madebyjam
Uploaded November 19, 2022
Rating 3
Size 2,503 Kb
Views 12,144
Do you need developer help for Progression Steps?

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!

Jim Savage (madebyjam) Script Codes
Name
CSS3 background scroll
Cross-Browser image masking with SVG
SVG fun
Minecraft Steve
Bootstrap 3 inspired docs.
Hover on everything but...
Lava lamp
Stretch irregular shape around dynamic text.
Physijs test
SVG play
Create amazing captions 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!