带圆点的进度条

最新推荐文章于 2025-05-18 15:46:50 发布

恰似很温柔

最新推荐文章于 2025-05-18 15:46:50 发布

阅读量2.2k

点赞数

分类专栏：工作文章标签： js css html

工作专栏收录该内容

6 篇文章

订阅专栏

/**
* Created by wangkai on 2018/1/11.
*/
;(function ($) {

/**
* 自定义
* @param method
* @returns {*}
*/
$.fn.step = function (method) {
//你自己的插件代码
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};

/**
* 默认值
* @type {{stepNames: [*], initStep: number}}
*/
var defStep = {
stepNames: ['', '', ''],
initStep: 1
};

/**
* 函数
* @type {{init: init, next: next, previous: previous, goto: goto}}
*/
var methods;
methods = {

/**
* 初始化
* @param options
*/
init: function (options) {
// 初始化参数为空，使用默认设置
if (!options) {
options = defStep;
} else {
// 步骤名称判断
if (!options.stepNames || typeof options.stepNames !== "object") {
options.stepNames = defStep.stepNames;
}
// 初始化步骤判断
if (!options.initStep || isNaN(options.initStep) || options.initStep < 0) {
options.initStep = defStep.initStep;
}
// 初始化步骤大于最大值
if (options.initStep > options.stepNames.length) {
options.initStep = options.stepNames.length;
}
}
// 初始化样式
var html = '';
html += '<ul class="progressbar">';
$.each(options.stepNames, function (index, name) {
html += '<li';
if (index < options.initStep) {
html += ' class="active" ';
}
html += '>';
html += name;
html += '</li>';
});
html += '</ul>';
this.empty().append(html);
// 计算宽度
$(".progressbar li").css("width", 100 / options.stepNames.length + "%");
},

/**
* 下一步
*/
next: function () {
var index = this.find("li.active").length;
if (index == this.find("li").length) {
return;
}
this.find("li").eq(index).addClass("active");
},

/**
* 上一步
*/
previous: function () {
var index = this.find("li.active").length;
if (index == 1) {
return;
}
this.find("li").eq(index - 1).removeClass("active");
},

/**
* 去第几步
* @param step
*/
goto: function (step) {
if (step < 0 || step > this.find("li").length) {
return;
}
this.find("li").removeClass("active");
var $target = this.find("li").eq(step - 1);
$target.addClass("active");
$target.prevAll("li").addClass("active");
}
};

}($));

css

.progressbar {
font-family: montserrat, arial, verdana;
margin: 15px;
padding: 0;
text-align: center;
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
z-index: 99;
}

.progressbar li {
list-style-type: none;
font-size: 9px;
float: left;
color:white;
position: relative;
}

.progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 20px;
margin: 0 auto 5px auto;
}

.progressbar li:after {
content: '';
width: calc(100% - 20px);
height: 2px;
background: white;
position: absolute;
left: calc((-100% + 20px) / 2);
top: 9px;
}

.progressbar li:first-child:after {
content: none;
}

.progressbar li.active:before, .progressbar li.active:after {
background: #27AE60;
color: white;

}

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" media="screen" href="css/step.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/step.js"></script>
</head>
<body style="background:black;">
<div class="steps"></div>
</body>
<script>
$(function () {
initStep();
});

function initStep() {
$(".steps").step({
stepNames: ['12/07<br/>工程开工', '01/10<br/>基础工程', '02/11<br/>主体结构', '03/03<br/>屋面外墙工程', '03/10<br/>机电安装工程', '03/12<br/>装饰装修工程','03/15<br/>室外工程','03/28<br/>工程竣工'],
initStep: 5
})
}
</script>
</html>