当前位置:网站首页>How to create a progress bar that changes color according to progress
How to create a progress bar that changes color according to progress
2022-07-01 05:21:00 【Phil Arist】
Progress bar is a common function on Web pages , however , Do you know how to create a progress bar that automatically adjusts the color according to the progress ?
The effect is as follows :
The requirements are :
Progress in 80% and 100% Between , Please set the background color to green .
Progress in 60% To 80% Between , Set the background color to blue .
Progress in 40% To 60% Between , Set the background color to purple .
Progress in 20% and 40% Between , Set the background color to yellow .
Progress in 0% To 20% Between , Set the background color to red .
According to this requirement , Let's discuss this topic today .
01、 Create a progress bar
First , We need to create a progress bar . By using <progress> Tab create progress bar .
But in the following example , We need to use CSS Variable , And this label is inappropriate . So we use conventional div Labels and some CSS Style to create a progress bar .
The progress bar consists of two parts :
Containers
progress
To create a container , We just need to create one div Elements :
<div class="bar" style="--percent: 50;"></div>
We use CSS Variable percentage to indicate progress .
Then we can use pseudo class elements to create progress parts .
.bar {
height: 20px;
background-color: #f5f5f5;
}
.bar::before {
content: '';
display: flex;
justify-content: end;
width: calc(var(--percent) * 1%);
height: 100%;
background: #2486ff; white-space: nowrap;}
02、 Color change
How can we achieve the effect of automatic color change ?
A trick : Set multiple background layers , Each background layer has a different color . Then we can adjust the background color indirectly by adjusting the layer .
When red and blue layers are stacked together , Red background . If we hide the red layer again , The background will turn blue .
If we were to 5 Hierarchically linked , Make the upper layer a little shorter , We will get the following results :
codepen Demonstration effect :https://codepen.io/bytefishmedium/pen/rNdaMYg
03、 Combine
Last , We need to merge the previous code , You can get a progress bar that can automatically adjust the color change .
Here it is , The effect of the color change progress bar I want to share with you is over , Thanks for reading .
边栏推荐
- Day 05 - file operation function
- Redis数据库的部署及常用命令
- Use and principle of reentrantlock
- Print stream and system setout();
- What can the points mall Games bring to businesses? How to build a points mall?
- Distributed architecture system splitting principles, requirements and microservice splitting steps
- Introduction to 3D modeling and processing software Liu Ligang University of science and technology of China
- 导电滑环使用的注意事项
- Rainbond结合NeuVector实践容器安全管理
- Things generated by busybox
猜你喜欢
Use and principle of reentrantlock
Causes of short circuit of conductive slip ring and Countermeasures
0xc000007b应用程序无法正常启动解决方案(亲测有效)
Practice of combining rook CEPH and rainbow, a cloud native storage solution
提高企业产品交付效率系列(1)—— 企业应用一键安装和升级
如何选择导电滑环材料
智慧运维:基于 BIM 技术的可视化管理系统
Rainbond结合NeuVector实践容器安全管理
Tcp/ip explanation (version 2) notes / 3 link layer / 3.2 Ethernet and IEEE 802 lan/man standards
Txncoordsender of cockroachdb distributed transaction source code analysis
随机推荐
LeetCode522-最长特殊序列II-哈希表-字符串-双指针
QT等待框制作
Introduction of 3D Modeling and Processing Software Liu Ligang, Chinese University of Science and Technology
JS random verification code
Memtable for leveldb source code analysis
[data recovery in North Asia] a data recovery case of raid crash caused by hard disk drop during data synchronization of hot spare disk of RAID5 disk array
Thread safety issues
LeetCode316-去除重复字母-栈-贪心-字符串
Fluentd is easy to use. Combined with the rainbow plug-in market, log collection is faster
Use and principle of reentrantlock
Explanation of characteristics of hydraulic slip ring
QDataStream的簡單讀寫驗證
Day 05 - file operation function
One click deployment of highly available emqx clusters in rainbow
导电滑环短路的原因以及应对措施
How to traverse massive data in redis
STM32 expansion board digital tube display
轻松上手Fluentd,结合 Rainbond 插件市场,日志收集更快捷
Design and application of immutable classes
AcWing 887. Finding combinatorial number III (Lucas theorem)