section-indicator.css

.section-indicator{font-family:'Open Sans',sans-serif;text-align:center;padding:15px 0;overflow:hidden;width:100%;max-width:65px}.section-indicator,.section-indicator *{box-sizing:border-box}.section-indicator ul{margin:0 0 30px;padding:0}.section-indicator ul li{list-style:none}.section-indicator ul li:not(:last-child){margin-bottom:24px}.section-indicator ul li a{display:inline-block;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out}.section-indicator ul li a:hover{-webkit-transform:scale(1.35);-moz-transform:scale(1.35);-o-transform:scale(1.35);-ms-transform:scale(1.35);transform:scale(1.35);-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;transition:all .4s ease-out}.section-indicator ul li span{position:relative;display:block;background-color:transparent;border:1px solid #444;width:12px;height:12px;-khtml-border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.section-indicator ul li span i{position:absolute;display:block;width:26px;height:26px;border:1px solid #444;top:-8px;left:-8px;opacity:0;-webkit-transform:scale(.7);-moz-transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);-khtml-border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}.section-indicator ul li.active a{pointer-events:none}.section-indicator ul li.active span{background-color:#444;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.section-indicator ul li.active span i{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.section-indicator .numbering{color:#444;font-size:20px}.section-indicator .numbering:before{content:'';width:1px;height:60px;background-color:#444;margin:0 auto 30px;display:block}.section-indicator .numbering span.current{font-weight:400;color:#000}.section-indicator .numbering span.max{font-size:75%;opacity:.6}