Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan ยท April More text challenge”, click to see the details of the activity.
๐ช~ If you like it, you can like it or leave a comment ๐~~~, thank you โญ๏ธ ๐ ๏ธ~~
The first idea was to write the progress bar only through before and after styles, but I found a bug that when it reached more than 90, the color of the upper right triangle after was wrong, the color was different, so it could not be realized. Then I thought of the second scheme. Put two divs inside mybar, a gradient horizontal column and a small triangle, and then still control the progress through Mybar. This is perfect solution
The renderings are as follows:
The code is as follows:
Html part
<div class="ProgressBox" style="width: 500px;">
<! -- Outer gradient box -->
<div style="background: linear-gradient(to right,#022F6D,#214879); padding: 10px 30px 10px 0 ! important;">
<! -- Diagonal triangle bottom frame -->
<div id="myProgress" class="myProgress">
<! -- Cross column inclined triangle whole -->
<div id="myBar" class="myBar">
<! -- Gradient horizontal column -->
<div class="myBara1"></div>
<! -- Small triangle on the right of gradient horizontal column -->
<div class="myBara2"></div>
</div>
<span id="baifen" class="baifen">0%</span>
</div>
</div>
</div>
Copy the code
The Css part
/* Progress bar */
.myProgress {
position: relative;
width: 100%;
height: 16px;
text-align: center;
line-height: 100px;
background: #052D55;
padding-right: 3% ! important;
}
.myProgress:before {
display: block;
content: ' ';
position: absolute;
width: 0;
height: 0;
border-left: 16px solid #052D55;
border-top: 16px solid rgb(33.72.121);
right: 0;
top: 0;
background: transparent;
}
.myProgress:after {
display: block;
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 16px solid transparent;
border-top: 16px solid transparent;
right: 0;
top: 0;
background: transparent;
}
.myBar {
position: relative;
width: 100%;
height: 16px;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, rgba(114.138.255.1), rgba(26.186.255.1));
}
/*.myBar:before { display: block; content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-left: 16px solid transparent; border-top: 16px solid #052D55; background: transparent; } .myBar:after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-right: 16px solid transparent; border-top: 16px solid transparent; right: 0; top: 0; background: transparent; } * /
.baifen {
position: absolute;
top: -42px;
right: -88px;
font-size: 30px;
font-family: DS-Digital;
font-weight: bold;
background: linear-gradient(0deg.#00D8BF 0%.#009CD6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.myBara1 {
display: inline-block;
width: 100%;
height: 16px;
background-color: pink;
position: absolute;
left: 0;
background: linear-gradient(to right, rgba(114.138.255.1), rgba(26.186.255.1));
}
.myBara2 {
top: 0;
right: 0;
width: 0;
height: 0;
display: inline-block;
border-bottom: 16px solid #1ABAFF;
border-right: 16px solid transparent;
position: absolute;
right: -16px;
}
Copy the code
Js part
Width sets the default initial value to 0; CurN is the percentage value to display for the current value; Total is the total number of
/ / the progress bar
move() {
var elem = document.getElementById("myBar");
var baifen = document.getElementById("baifen");
var width = 0;// The initial value defaults to 0
var curN = 80;/ / the current value
var total = 100; / / the total number of
var id = setInterval(frame, 10);
function frame() {
elem.style.width = width + The '%';
width++;
if (width >= curN) {
clearInterval(id);
} else {
width++;
elem.style.width = ((width / total) * 100) + The '%';
baifen.innerHTML = width * 1 + The '%'; }}// An improved version
function frame() {
elem.style.width = width + The '%';
baifen.innerHTML = width * 1 + The '%';
width++;
if (curN == width) {
elem.style.width = width + The '%';
baifen.innerHTML = width * 1 + The '%';
} else if (width > curN) {
clearInterval(id);
} else {
width++;
elem.style.width = ((width / total) * 100) + The '%';
baifen.innerHTML = width * 1 + The '%'; }}},Copy the code
Specific effects can be directly copied to the local code to see, the style of color can be fine-tuned to their own oh ๐๐~ welcome to read a like โญ๏ธ port blue ๐๐
Column recommended
Recommend their own column, welcome everyone to collect attention to ๐~
- Set the interview
- Native js set
- Vue set
- Visual set
- CSS set