Steps
How do I make an steps?
A list style to indicate steps of a process.. What is a steps? How do you make a steps? This script and codes were developed by Xand0r on 23 November 2022, Wednesday.
Steps - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Steps</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 30px; }
.steps { list-style: none; padding: 0; margin: 0 0 20px 0; border: 4px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; background-color: #f0f0f0;
}
.steps li { float: left; color: #ccc; line-height: 30px; padding: 0 100px 0 15px; font-size: 12px; font-weight: bold; text-align: center; position: relative;
}
.steps li + li { padding: 0 100px 0 28px;
}
.steps li:last-child { padding-right: 100px;
}
.steps .active { background-color: #6899d3; color: #fff;
}
.steps li:after,
.steps li:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 5;
}
.steps li:after { border-left-color: #f0f0f0; border-width: 15px; top: 50%; margin-top: -15px;
}
.steps li:before { border-left-color: #ddd; border-width: 18px; top: 50%; margin-top: -18px;
}
.steps .active:after { border-left-color: #6899d3;
}
.steps .active:before { border-left-color: #ffffff;
}
.steps .complete { background-color: #e9e9e9;
}
.steps .active.complete { background-color: #4284d3;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ol class="steps"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li class="complete">Complete</li>
</ol>
<br>
<ol class="steps"> <li class="active">1</li> <li class="active">2</li> <li class="active">3</li> <li class="active">4</li> <li>5</li> <li>6</li> <li class="complete">Complete</li>
</ol>
<br>
<ol class="steps"> <li class="active">1</li> <li class="active">2</li> <li class="active">3</li> <li class="active">4</li> <li class="active">5</li> <li class="active">6</li> <li class="active complete">Complete</li>
</ol> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Steps - Script Codes CSS Codes
body { padding: 30px; }
.steps { list-style: none; padding: 0; margin: 0 0 20px 0; border: 4px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; background-color: #f0f0f0;
}
.steps li { float: left; color: #ccc; line-height: 30px; padding: 0 100px 0 15px; font-size: 12px; font-weight: bold; text-align: center; position: relative;
}
.steps li + li { padding: 0 100px 0 28px;
}
.steps li:last-child { padding-right: 100px;
}
.steps .active { background-color: #6899d3; color: #fff;
}
.steps li:after,
.steps li:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 5;
}
.steps li:after { border-left-color: #f0f0f0; border-width: 15px; top: 50%; margin-top: -15px;
}
.steps li:before { border-left-color: #ddd; border-width: 18px; top: 50%; margin-top: -18px;
}
.steps .active:after { border-left-color: #6899d3;
}
.steps .active:before { border-left-color: #ffffff;
}
.steps .complete { background-color: #e9e9e9;
}
.steps .active.complete { background-color: #4284d3;
}
Developer | Xand0r |
Username | Xand0r |
Uploaded | November 23, 2022 |
Rating | 3 |
Size | 2,482 Kb |
Views | 14,168 |
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!
Name | Size |
Local Storage with Arrays | 1,877 Kb |
CSS Buttons - KA | 2,502 Kb |
Portfolio | 2,697 Kb |
Simple Countdown Timer Testing | 2,242 Kb |
DataTables Example | 2,687 Kb |
A Pen by Xand0r | 1,928 Kb |
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!
Name | Username | Size |
SVG Circle Progress | JMChristensen | 3,368 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Konami Code Easter Egg | Teolitto | 3,051 Kb |
Adding Items | Valhead | 4,008 Kb |
Welcome | Nakome | 6,076 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Touch Carousel - last, no gaps. | Berkin | 4,332 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Addthis_button | Esambino | 1,691 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!