jquery css實(shí)現(xiàn)流程進(jìn)度條

第jquerycss實(shí)現(xiàn)流程進(jìn)度條

本文實(shí)例為大家分享了jquerycss實(shí)現(xiàn)流程進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下

方案1：

方案2：

!DOCTYPEhtml

html

head

metacharset=utf-8

title流程進(jìn)度條/title

styletype=text/css

.div_home{

width:100%;

height:720px;

background:pink;

.div_button{

width:100%;

background:rgba(249,214,81,1);

text-align:center;

:root{

--progress_div-height:100px;

--progress_div-width:100%;

--progress_div-background:rgba(204,232,207,1);

--progress_line-top:50px;

--progress_line-height:4px;

--progress_node-height:20px;

--progress_node-width:20px;

--progress_node-top:-8px;

--progress_node-lineHeight:20px;

--progress_text-heigth:20px;

--progress_text-width:120px;

--progress_text-top:-30px;

--progress_color-yes:rgba(40,200,252,1);

--progress_color-no:rgba(213,213,213,1);

.progress_div{

height:var(--progress_div-height);

width:var(--progress_div-width);

background:var(--progress_div-background);

text-align:center;

margin:auto0;

/*灰條樣式*/

.progress_line_no{

position:relative;

top:var(--progress_line-top);

height:var(--progress_line-height);

background:var(--progress_color-no);

/*藍(lán)條樣式*/

.progress_line_yes{

height:var(--progress_line-height);

background:var(--progress_color-yes);

/*未激活節(jié)點(diǎn)樣式*/

.progress_node_no{

position:absolute;

border-radius:100%;

width:var(--progress_node-width);

height:var(--progress_node-height);

top:var(--progress_node-top);

line-height:var(--progress_node-lineHeight);

background:var(--progress_color-no);

color:var(--progress_color-no);

/*已激活節(jié)點(diǎn)樣式*/

.progress_node_yes{

position:absolute;

border-radius:100%;

width:var(--progress_node-width);

height:var(--progress_node-height);

top:var(--progress_node-top);

line-height:var(--progress_node-lineHeight);

background:var(--progress_color-yes);

color:var(--progress_color-yes);

/*節(jié)點(diǎn)文字*/

.progress_text{

position:absolute;

vertical-align:middle;

text-align:center;

width:var(--progress_text-width);

height:var(--progress_text-heigth);

top:var(--progress_text-top);

/*當(dāng)前激活節(jié)點(diǎn)標(biāo)記*/

.progress_node_currentActive{

/style

/head

body

div>

使用：

1.首先要引入一個jquery.js

scripttype=text/javascriptsrc=jquery-3.3.1.min.js/script

2.CSS：

:root開始所有css(css基本上都使用的變量，改樣式只需要改:root里的變量值就行)

3.JS：

保留所有js方法

調(diào)用loadProgress(1000,2)方法，傳入進(jìn)度條長度、最后一個激活節(jié)點(diǎn)下標(biāo)(0到節(jié)點(diǎn)的length-1)

186行設(shè)置了整體相對于父級div居中，自己看需求改一