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
Operate on two columns of data as new columns in sql
As shown below: select a1,a2,a1+a2 a,a1*a2 b,a1*1...
5 super useful open source Docker tools highly recommended
Introduction The Docker community has created man...
About React Native unable to link to the simulator
React Native can develop iOS and Android native a...
Summary of using the reduce() method in JS
Table of contents 1. Grammar 2. Examples 3. Other...
How to view nginx configuration file path and resource file path
View the nginx configuration file path Through ng...
Draw an iPhone based on CSS3
Result:Implementation Code html <div class=...
Example code for implementing an Upload component using Vue3
Table of contents General upload component develo...
A brief discussion of several browser compatibility issues encountered
background Solving browser compatibility issues i...
Vue implements weather forecast function
This article shares the specific code of Vue to r...
Solution to the problem that MySQL service cannot be stopped or deleted under Windows
I installed MySQL on Windows by unzipping the com...
CSS to achieve glowing text and a little bit of JS special effects
Implementation ideas: Use text-shadow in CSS to a...
How to dynamically add ports to Docker without rebuilding the image
Sometimes you may need to modify or add exposed p...
Detailed explanation of the functions of each port of Tomcat
From the tomcat configuration file, we can see th...
MySQL 4 methods to import data
1. Import mysql command The mysql command import ...
Detailed explanation of MySQL view management view example [add, delete, modify and query operations]
This article uses an example to describe the mana...