CSS horizontal progress bar and vertical progress bar implementation code
|
Sometimes it’s nice to see some nice scroll bar effects. Here I share with you how to use CSS to achieve 1. Horizontal progress bar
<html>
<head>
<title>Horizontal progress bar</title>
<style type="text/css">
.loadbar
{
width:200px;
height:25px;
background-color:#fff;
border:1px solid #ccc;
}
.bar
{
line-height:25px;
height:100%;
display:block;
font-family:arial;
font-size:12px;
background-color:#bb9319;
color:#fff;
}
</style>
</head>
<body>
<div class="loadbar">
<strong class="bar" style='width:30%;'>30%</strong>
</div>
</body>
</html>The effect is as follows:
2. Vertical progress bar
<html>
<head>
<title>Vertical Progress Bar</title>
<style type="text/css">
.loadbar
{
width:25px;
height:200px;
background-color:#fff;
border:1px solid #ccc;
position:relative;
}
.bar
{
width:100%;
display:block;
font-family:arial;
font-size:12px;
background-color:#bb9319;
color:#fff;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div class="loadbar">
30%
</div>
</body>
</html>
This is the end of this article about the implementation code of CSS horizontal progress bar and vertical progress bar. For more relevant CSS horizontal progress bar and vertical progress bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: Introduction to the usage of props in Vue
>>: Implementation of mysql backup strategy (full backup + incremental backup)
Recommend
Solve the problem of not being able to access the RabbitMQ management page in the Linux server
Because a certain function of my project requires...
MySQL calculates the number of days, months, and years between two dates
The MySQL built-in date function TIMESTAMPDIFF ca...
How to install iso file in Linux system
How to install iso files under Linux system? Inst...
JavaScript to achieve magnifying glass effect
This article shares the specific code for JavaScr...
CSS and HTML and front-end technology layer diagram
Front-end technology layer (The picture is a bit e...
JavaScript to achieve fixed sidebar
Use javascript to implement a fixed sidebar, for ...
Summary of Mysql common benchmark commands
mysqlslap Common parameter description –auto-gene...
Native JavaScript to achieve skinning
The specific code for implementing skinning with ...
Detailed explanation of the flexible use of CSS grid system in projects
Preface CSS grids are usually bundled in various ...
Where is mysql data stored?
MySQL database storage location: 1. If MySQL uses...
How to choose between MySQL CHAR and VARCHAR
Table of contents VARCHAR and CHAR Types Conclusi...
Centos7.5 configuration java environment installation tomcat explanation
Tomcat is a web server software based on Java lan...
MySQL fuzzy query statement collection
SQL fuzzy query statement The general fuzzy state...
Introduction to cloud native technology kubernetes (K8S)
Table of contents 01 What is Kubernetes? 02 The d...
Modify file permissions (ownership) under Linux
Linux and Unix are multi-user operating systems, ...