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
Why developers must understand database locks in detail
1.Lock? 1.1 What is a lock? The real meaning of a...
Detailed explanation of crontab scheduled execution command under Linux
In LINUX, periodic tasks are usually handled by t...
How to understand JavaScript modularity
Table of contents 1. Browser support 2. export ex...
Zookeeper stand-alone environment and cluster environment construction
1. Single machine environment construction# 1.1 D...
Detailed tutorial on running multiple Springboot with Docker
Docker runs multiple Springboot First: Port mappi...
Vue implements a scroll bar style
At first, I wanted to modify the browser scroll b...
Three ways to communicate between Docker containers
We all know that Docker containers are isolated f...
WeChat Mini Program Basic Tutorial: Use of Echart
Preface Let’s take a look at the final effect fir...
Summary of methods to include file contents in HTML files
In the forum, netizens often ask, can I read the ...
Detailed process of upgrading glibc dynamic library in centos 6.9
glibc is the libc library released by gnu, that i...
Basic usage examples of listeners in Vue
Table of contents Preface 1. Basic usage of liste...
Summary of Linux system user management commands
User and Group Management 1. Basic concepts of us...
Detailed explanation of JavaScript's garbage collection mechanism
Table of contents Why do we need garbage collecti...
linux No space left on device 500 error caused by inode fullness
What is an inode? To understand inode, we must st...
Docker+gitlab+jenkins builds automated deployment from scratch
Table of contents Preface: 1. Install Docker 2. I...