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: '';
    display: block;
    padding-top: 100%;
}
.chapter-image{
  position: absolute;top: 50%;
  left: 10%;
  width: 75%;
  -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
/*.img {
    width: 100%;
}*/
.img:before {
    content: '';
    padding-top: 66%;
    display: block;
}
.imgfill {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.fill-parent, .page-curtain, .ui-timelines svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-timelines svg:first-child {
    opacity: .2;
}

.ui-timelines svg {
    display: block;
    overflow: visible;
}
.ui-chapter {
    cursor: pointer;
    display: block;
    position: absolute;
}
.chapter-point {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    display: block;
    position: absolute;
    background: #1a1a1b;
    border: 1px solid #1a1a1b;
    box-sizing: border-box;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.chapter-label {
    font-family: "walsheim-regular";
    font-size: 12px;
    letter-spacing: .2em;
    color: #6c7076;
    position: absolute;
    -webkit-transform: translateX(2px);
    -moz-transform: translateX(2px);
    -ms-transform: translateX(2px);
    -o-transform: translateX(2px);
    transform: translateX(2px);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.chapter-point:after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 100%;
    border: 1px solid #1a1a1b;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.ui-chapter:hover .chapter-point, .ui-chapter.current-chapter .chapter-point {
    width: 8px;
    height: 8px;
    background: white;
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin.js"></script>

<script type="text/javascript">
function preload_images(images, functions) {
    if(typeof functions === 'undefined') functions = {};
    var loaded = 0;
    for(var i=0; i<images.length; i++) {
        ////console.log('preload '+images[i]);
        var img = new Image();
        img.onload = img.onerror = function() {
            ////console.log(img.src + ' loaded');
            var onImgParams = {
                //img : img,
                //index : i,
                loadedPct : (loaded / images.length)
            };
            if( _.isFunction(functions.onImgLoad) ) functions.onImgLoad(onImgParams);

            loaded++;
            if(loaded >= images.length && _.isFunction(functions.onAllImgsLoaded)) {
                ////console.log('all imgs loaded');
                functions.onAllImgsLoaded()
            }
        };
        img.src = images[i];
    }// endfor
}// preload_images()
</script>
</head>

<body >
<div id="page" class="site">
  <div id="content" class="site-content">
    <div class="content-block history">
      <div class="content-wrap small-wrap vert-spaced lined">
        <div class="columns">
          <div class="col third middled copy-col onScrollEnter">
            <h3 class="chapter-headline">1919</h3>
            <p class="chapter-copy s-text top-spaced">1919事件 </p>
          </div>
          <!-- .col -->
          <div class="col two-thirds middled ui-col rel onScrollEnter">
            <div class="chapter-image img imgfill" style="background-image:url('//repo.bfw.wiki/bfwrepo/image/5f97a67c14886.png');"></div>
            <div class="timeline-container circle-timelines">
              <div class="fill-parent ui-timelines">
                <svg version="1.1" id="Layer_1" x="0px" y="0px"
									 viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
                  <circle fill="none" stroke="#000000" stroke-miterlimit="10" cx="300" cy="300" r="300"/>
                </svg>
                <svg version="1.1" id="Layer_1" x="0px" y="0px"
									 viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
                  <circle fill="none" stroke="#000000" stroke-miterlimit="10" cx="300" cy="300" r="300"/>
                </svg>
              </div>
              <!-- .ui-timelines -->
              <div class="ui-chapters fill-parent">
                <div class="ui-chapter current-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1919</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1940</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1942</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1962</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1963</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1965</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1977</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1992</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">1997</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">2002</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">2006</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="chapter-label">2007</span> </div>
                <div class="ui-chapter"> <span class="chapter-point"></span> <span class="ch.........完整代码请登录后点击上方下载按钮下载查看