js+css实现圆形时间线进度条效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：js+css实现圆形时间线进度条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="de-DE" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .container.specialservices .post-content h6, h5, h6, .container.specialservices .post-content h6, p, .wysiwyg ul, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1;
    font-family: "walsheim-regular";
    color: #1a1a1b;
    -webkit-font-smoothing: antialiased;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .container.specialservices .post-content h6, h5, h6, .container.specialservices .post-content h6, p, .wysiwyg ul, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
.content-block {
    position: relative;
}
.content-wrap.small-wrap {
    width: 80%;
    max-width: none;
}

.content-wrap.small-wrap {
    width: calc(100% - 398px);
    max-width: 1006px;

}
.content-wrap {
    width: calc(100% - 30px);
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
}
.vert-spaced {
    padding-top: 150px;
    padding-bottom: 150px;
}
.content-wrap.small-wrap.lined:before {
    left: 0;
}
.content-wrap.small-wrap.lined:before, .content-wrap.small-wrap.lined:after {
    content: '';
    position: absolute;
    display: block;
}
.content-wrap.small-wrap.lined:before, .content-wrap.small-wrap.lined:after, .content-wrap.small-wrap.lined .mid-line {
    position: absolute;
    width: 1px;
    height: 100%;
    /*background: #e7e9ec;*/
    opacity: .5;
    top: 0;
    z-index: -1;
}
.columns {
    font-size: 0;
}
.content-block.history .copy-col {
    position: relative;
    z-index: 1;
}

.columns .col.middled {
    vertical-align: middle;
}

.columns .col.third {
    width: 33.3%;
}

.columns .col {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.columns .col.middled {
    vertical-align: middle;
}

.columns .col.two-thirds {
    width: 66.7%;
}
.columns .col {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.rel {
    position: relative;
}
.chapter-headline {
    font-family: "lyon-light";
    font-size: 165px;
    letter-spacing: .02em;
}
p.s-text, .wysiwyg ul.s-text, .maps-list-item .openhours p, .maps-list-item .openhours .wysiwyg ul, .wysiwyg .maps-list-item .openhours ul{
  font-size: 13px;
    line-height: 24px;
    letter-spacing: .02em;

}
.top-spaced, .job-form .input-container, .intro-copy p, .intro-copy .wysiwyg ul, .wysiwyg .intro-copy ul, .container.about .post-content p, .container.about .post-content .wysiwyg ul, .wysiwyg .container.about .post-content ul{
  margin-top: 45px;
}
.columns .col.middled {
    vertical-align: middle;
}

.columns .col.two-thirds {
    width: 66.7%;
}
.columns .col {
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.rel {
    position: relative;
}
.content-block.history .ui-col:before {
    content: '';
    dis.........完整代码请登录后点击上方下载按钮下载查看