We Keep Coding

Selecting an element with same class names using css

I have this ugly generated code and I want to pick an element and add an additional attribute. I can only use CSS to do this. I tried a few things such as #CHART_1_control div:nth-of-type and nth-child but I seem to be getting lost with all the <g> classes. I'm also not sure if that's the direction I should be heading.
I'm trying to get to the last <g> class and change the three <rect> to include an additional attribute. Is that possible to do?
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
So here we change the fill color just using css on the last 3 rect
Full Code below:
.v-datapoint rect{
fill:blue;
}
<div id="CHART_1_control" style="width:353px;height:200px" class="zenControl">
<div class="uvb-vizframe-container">
<div style="width: 353px; height: 200px; visibility: visible; position: relative;">
<div class="viz-controls-chart-holder viz-controls-common-scrollable" style="position: relative; width: 353px; height: 200px;">
<div class="viz-controls-chart-layer" style="position: absolute; width: 353px; height: 200px; visibility: visible;">
<div id="UIComp_0" class="v-info" aria-labelledby="UIComp_0-title" tabindex="0" style="height: 100%; width: 100%; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none;">
<svg class="v-m-root" focusable="false" tabIndex="-1" style="left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;">
<defs></defs>
<g class="v-m-desc-title">
<title id="UIComp_0-title">An Interactive Column Chart </title>
</g>
<g class="v-m-action-layer-group js-zen-nozoom"></g>
<g class="v-m-decoration-layer-group"></g>
<g class="v-m-background">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="353" height="200" style="fill:transparent"></rect>
</g>
<g class="v-m-title" transform="translate(48.34765625, 24)"></g>
<g class="v-m-legendGroup" transform="translate(329, 24)" role="listbox">
<g class="v-m-legend" transform="translate(0,0)">
<rect class="v-bound" width="0" height="0" visibility="hidden"></rect>
</g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
<g class="v-m-plot" transform="translate(24.34765625, 0)">
<rect class="v-background-body viz-plot-background v-morphable-background" x="0" y="0" width="280.65234375" height="126.6" style="fill:transparent"></rect>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="280.65234375" y1="0" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="280.65234375" y2="0" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<line class="v-background-border viz-plot-background-border" x1="0" y1="126.6" x2="280.65234375" y2="126.6" style="stroke: rgb(216, 216, 216); stroke-width: 1;"></line>
<clipPath id="plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732">
<rect y="-1" width="281.65234375" height="127.6"></rect>
</clipPath>
<rect class="v-plot-bound v-bound v-zoom-plot" width="280.65234375" height="126.6" fill="transparent"></rect>
<g clip-path="url(#plot_main_clipPath_9e2f712c-3fd6-4720-80a0-0040e5b7a732)">
<g class="v-plot-main" role="list" transform="translate(0, 0)">
<g class="v-gridline-group">
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="126.6" x2="280.65234375" y2="126.6"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="84.4" x2="280.65234375" y2="84.4"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="42.2" x2="280.65234375" y2="42.2"></line>
</g>
<g class="v-gridline" stroke="#d8d8d8" stroke-width="1" shape-rendering="crispEdges">
<line class="v-gridline-mainline" x1="0" y1="0" x2="280.65234375" y2="0"></line>
</g>
</g>
<g class="v-datapoint-group" fill-opacity="0.4" stroke-opacity="0.4">
<g>
<path d="M23.3876953125,126.6L23.3876953125,126.6L70.1630859375,126.6L70.1630859375,126.6L116.93847656249999,126.6L116.93847656249999,126.6L163.7138671875,126.6L163.7138671875,126.6L210.4892578125,126.6L210.4892578125,35.87L257.2646484375,35.87L257.2646484375,126.6" fill="none" stroke-linejoin="round" stroke="#008000" stroke-width="1" class="v-bar-series-path" display="none"></path>
<g data-id="0" data-datapoint-id="1" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(23.3876953125, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#008000" stroke-opacity="0.4"></rect>
</g>
<g data-id="1" data-datapoint-id="2" class="v-datapoint v-morphable-datapoint v-datapoint-default" transform="translate(116.93847656249999, 126.6)" fill-opacity="0.4">
<rect width="46.775390625" height="0" fill="#ff9900" stroke-opacity="0.4"></rect>
</g>
<g data-id="2" data-datapoint-id="3" class="v-datapoint v-morphable-datapoint v-datapoint-selected" transform="translate(210.4892578125, 35.87)" fill-opacity="1">
<rect width="46.77539062500001" height="90.72999999999999" fill="#cc0000" stroke-opacity="1" contenteditable="true" stroke="#445a7c" stroke-width="1px"></rect>
</g>
</g>
</g>
</g>
</g>

How set svg element as background-image in div?

I have svg element that created during runtime on the page (it is create by another library).
Is it possible to use this svg (id="svg1") as background-image to another div?
<div style="height:300px;background-image:url(..svg1...)"></div>
svg1:
<svg id="svg1" viewBox="0 0 100 100" version="1.1" preserveAspectRatio="xMidYMid meet">
<rect . . . > . . . </rect>
</svg>
If it possible to do that in css only it will be great
<svg id="svg1" viewBox="0 0 270 180" version="1.1" preserveAspectRatio="xMidYMid meet"><rect clip-path="url(#gwvlzeb48ee)" x="0" y="0" width="270" height="180" style="fill: url("#hz0tt22rgsn");"></rect><defs><clipPath id="gwvlzeb48ee"><rect x="0" y="0" rx="0" ry="0" width="270" height="140"></rect><rect x="0" y="145" rx="3" ry="3" width="150" height="15"></rect><rect x="0" y="165" rx="3" ry="3" width="150" height="15"></rect><rect x="220" y="145" rx="3" ry="3" width="50" height="15"></rect><rect x="220" y="165" rx="3" ry="3" width="50" height="15"></rect></clipPath><linearGradient id="hz0tt22rgsn"><stop offset="0.482599" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-2; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="0.982599" stop-color="#efefef" stop-opacity="1"><animate attributeName="offset" values="-1.5; 1.5" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="1.4826" stop-color="#e9e9e9" stop-opacity="1"><animate attributeName="offset" values="-1; 2" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>
<div style="border:1px solid red; height:300px; background-image:url(#svg1);"></div>
Also this not working:
<!-- language: lang-html -->
<svg height="100" width="100" id="svg1">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
<div style="border:1px solid red;height:300px; background-image:url(#svg1);"></div>
<!-- end snippet -->

You can write the SVG right in your CSS. It's also possible to use background-repeat and all other background-attribues with this approach too.
div {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />\
Sorry, your browser does not support inline SVG. \
</svg> ') 0 / auto 100%;
}
<div style="height: 50px">
</div>

You can also place the SVG inside of the div and stretch it to cover with CSS. The benefits of this approach is you can style the SVG with CSS, as opposed to inlining it in the CSS using background-image. It all depends on your particular use case.
Demo: https://codepen.io/tedw/pen/bGbKGPB?editors=1100
.box {
border: 1px solid blue;
margin-bottom: 50px;
position: relative;
}
.example-1 {
height: 150px;
width: 300px;
}
.example-2 {
height: 200px;
width: 200px;
}
.example-3 {
height: 200px;
width: 100px;
}
svg {
fill: red;
height: 100%;
left: 0;
position: absolute;
top: 0;
stroke: black;
stroke-width: 3;
width: 100%;
}
<!-- Example 1 -->
<div class="box example-1">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40"/>
</svg>
</div>
<!-- Example 2 -->
<div class="box example-2">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40"/>
</svg>
</div>
<!-- Example 3 -->
<div class="box example-3">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="50" cy="50" r="40"/>
</svg>
</div>

How to automatically scroll horizontal to the middle inside a div?

I want to automatically scroll to the middle in the horizontal dimension, such that the red line (which is placed right in the middle of the svg) is in the middle.
Which values do I have to choose for scrollLeft?
var div = $('.container');
div.animate({
scrollLeft: div.width() / 2 + div.offset().left
});
.container {
height: 200px;
width: 400px;
border: 1px solid black;
overflow: scroll;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<svg width="1000" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>

You should be setting the scrollLeft property like below:
div.find('svg').width() / 2 - div.width() / 2
See demo below:
var div = $('.container');
div.animate({
scrollLeft: div.find('svg').width() / 2 - div.width() / 2
});
.container {
height: 200px;
width: 400px;
border: 1px solid black;
overflow: scroll;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=container>
<svg width="1000" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="600" cy="200" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="40" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<circle cx="960" cy="320" r="40" stroke="green" stroke-width="4" fill="yellow" />
<line x1="499" y1="0" x2="499" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>

make SVG as a timeline

i' m trying to make a circular timeline with SVG.
i m using a fullpage js
so i made a blue line working progressivly on scroll around the circle but now i want that my anchors dash array appears too but i can t find the solution, i want my anchors appear and stay when i scroll down ( like a timeline ) and come back to grey when scroll up
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>
my code :

Simply add an array which will contain each of your circles' id and change their css in the onleave event after looking for the object returned by the event :
var smallCircles= ['top','right','bottom','left','top'];
...
onLeave: function(...
if(direction=='up'){
$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');
}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
if(direction=='up'){$('#smallblue'+smallCircles[nextIndex]).css('stroke-dashoffset', '40');}
$('#smallblue'+smallCircles[nextIndex-1]).css('stroke-dashoffset', '0');
}
});
});
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,1);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright, #smallbluetop{
stroke-dasharray:40;
stroke-dashoffset:40;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft:hover, #smallbluebottom:hover, smallbluetop:hover, #smallblueright:hover{
stroke-dashoffset:0;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
h2{
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="accueil">
<h2>first</h2>
</div>
<div class="section" id="don">
<h2>second</h2>
</div>
<div class="section" id="tri">
<h2>3rd</h2>
</div>
<div class="section" id="recycle">
<h2>4th</h2>
</div>
<div class="section" id="vente">
<h2>last</h2>
</div>
</div>

svg animation on anchor

I'm trying to make a circular timeline with steps,
I am using a fullpage.js plugin that make every sections at 100% of the windows with body in overflow so actually have only 4 steps on scroll
so the steps have to be:
section1 -->stroke 0%
section2 -->stroke 25%
section3 -->stroke 50%
section4 -->stroke 75%
In the current code I use hover for show what the effect :
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family: 'source_sans_proextralight';
}
/********** timeline ************/
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,0.4);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#bluecircle:hover{
stroke-dashoffset:0;
}
#smallblueleft, #smallbluebottom, #smallblueright{
opacity:0;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
opacity:1;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!---------- timeline ----------->
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>
<a xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>
<a xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>
<a xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="don">
<h2></h2>
<p></p>
</div>
<div class="section" id="emploi">
<h2>fullPage.js</h2>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section" id="section2">
<h2>Example</h2>
<p>HTML markup example to define 4 sections.</p>
</div>
<div class="section" id="section4">
<h2>Working On Tablets</h2>
<p>Designed to fit to different screen</p>
</div>
</div>

You can use the fullpage.js callback onleave(index, nextIndex, direction)
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)) );
}
However, I didn't find a way to get the anchors.length value, this would be better than hardcoded 4.
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
menu: '#menu',
scrollingSpeed: 1000,
onLeave: function(index, nextIndex, direction){
$('#bluecircle').css('stroke-dashoffset', (1510/4)*(4-(nextIndex-1)));
}
});
});
body {
height:100%;
margin:0;
padding:0;
overflow:hidden;
font-family: 'source_sans_proextralight';
}
/********** timeline ************/
#timeline{
position:fixed;
width:500px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-250px;
pointer-events: all;
z-index:99;
}
#greycircle, #smallgreytop, #smallgreyleft, #smallgreybottom, #smallgreyright{
stroke:rgba(204,204,204,0.4);
}
#bluecircle{
stroke-dasharray:1510;
stroke-dashoffset:1510;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallblueleft, #smallbluebottom, #smallblueright{
opacity:0;
-webkit-transition:all 1s ease;
transition:all 1s ease;
}
#smallbluetop:hover, #smallblueleft:hover, #smallbluebottom:hover, #smallblueright:hover{
opacity:1;
}
/********** section ************/
.fp-section {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fp-section.fp-table, .fp-slide.fp-table {
display: table;
table-layout:fixed;
width: 100%;
}
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.fp-scrollable {
overflow: scroll;
}
.fp-notransition {
-webkit-transition: none !important;
transition: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<!---------- timeline ----------->
<div id="timeline">
<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500">
<circle id="greycircle" fill="none" stroke="#727272" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024"/>
<circle id="smallgreytop" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/>
<circle id="smallgreyleft" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/>
<circle id="smallgreybottom" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/>
<circle id="smallgreyright" fill="#FFFFFF" stroke="#A6A6A6" stroke-width="2" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/>
<circle id="bluecircle" fill="none" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="248.065" r="239.024" transform="rotate(-90 249.85 248.065)"/>
<a data-offset="0" xlink:href="#firstPage"><circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="8.643" r="5.976"/></a>
<a data-offset="1132.5" xlink:href="#secondPage"><circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="488.875" cy="247.667" r="5.976"/></a>
<a data-offset="755" xlink:href="#3rdPage"><circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="249.85" cy="486.691" r="5.976"/></a>
<a data-offset="377.5" xlink:href="#4thPage"><circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="3" stroke-miterlimit="10" cx="10.826" cy="247.667" r="5.976"/></a>
</svg>
</div>
<div id="fullpage">
<div class="section " id="don">
<h2></h2>
<p></p>
</div>
<div class="section" id="emploi">
<h2>fullPage.js</h2>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
</div>
<div class="section" id="section2">
<h2>Example</h2>
<p>HTML markup example to define 4 sections.</p>
</div>
<div class="section" id="section4">
<h2>Working On Tablets</h2>
<p>Designed to fit to different screen</p>
</div>
</div>