Develop Reference

Centered text in a transparent circle?

I have a percentage animation which the number counts up while the outer stroke completes. This animation works perfectly but I need to have the text centered both vertically and horizontally, also the inner circle transparent. Any idea how I could do this?
function perCirc($el, end, i) {
if (end < 0)
end = 0;
else if (end > 100)
end = 100;
if (typeof i === 'undefined')
i = 0;
var curr = (100 * i) / 360;
$el.find(".perCircStat").html(Math.round(curr) + "%");
if (i <= 180) {
$el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #ccc 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
} else {
$el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #00cc00 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
}
if (curr < end) {
setTimeout(function() {
perCirc($el, end, ++i);
}, 1);
}
}
.perCirc {
position: relative;
text-align: center;
width: 240px;
height: 240px;
border-radius: 100%;
background-color: #00cc00;
/* the color of the percent */
}
.perCirc .perCircInner {
position: relative;
top: 10px;
left: 10px;
text-align: center;
width: 220px;
height: 220px;
border-radius: 100%;
background-color: hsla(0, 0%, 73%, 1.00);
/* the color of the inner circel */
}
.perCirc .perCircInner div {
position: relative;
color: #4E1414;
}
.perCirc .perCircStat {
font-size: 30px;
margin: 0 auto;
}
<div id="sellPerCirc" class="perCirc">
<div class="perCircInner">
<div class="perCircStat">0%</div>
<div>Complete</div>
</div>
</div>

Add these attributes to your perCircInner class
display: flex;
flex-direction: column;
justify-content: center;

Changing Range Slider background via Javascript

I'm trying to change the background color of a range slider via Javascript.
I'm not getting any errors, however the background color isn't changing at all. All the other values that change work, just not the background style.
<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange"/>
.slider{
-webkit-appearance: none;
width: 100%;
height: 20px;
background: linear-gradient(90deg, rgb(244, 237, 144) 60%, rgb(244, 237, 144) 60%);
outline: none;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
box-shadow: 0px 0.1px 10px -2px #000000;
}
document.getElementById('myRange').addEventListener('input', function(){sliderChange(this.value)});
function sliderChange(val) {
document.getElementById('myRange').style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%);';
if (val == 6000) {
var value = '6,000+';
} else {
var value = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
document.getElementById('sqftValue').innerHTML = value;
var base = val * 0.12;
var discount = base * 0.2;
var cost = base - discount;
document.getElementById('cost').innerHTML = cost.toFixed(0);
}
What am I missing here?

Try removing the semi-colon from the end of the value you're setting it to.
range.style.background =
'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';
The value above should like this.
range.style.background =
'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)'
const range = document.getElementById('myRange')
range.addEventListener('input', function(){
sliderChange(this.value)
});
function sliderChange(val) {
range.style.background = 'linear-gradient(90deg, rgb(117, 252, 117) ' + val + '%, rgb(244, 237, 144) ' + val + '%)';
}
.slider{
-webkit-appearance: none;
width: 100%;
height: 20px;
background: linear-gradient(90deg, red 60%, blue);
outline: none;
opacity: 1;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
border-radius: 12px;
box-shadow: 0px 0.1px 10px -2px #000000;
}
<input type="range" min="1000" max="6000" value="2000" step="100" class="slider" id="myRange" name="myRange" />
Also, using two percentage values doesn't do anything by the way.

Single line with multiple colors based on time in using jquery

I need to generate a graph like I have shown here
Single line with multiple colors over time
The X axis will be time series . Can anyone suggest a JQuery plugin to generate such a graph ?
Thanks

Try below chart and change as per your requirement
var graph = (function(){
var urgentTitle = "Urgent",
$graph = $('.graph'),
$barContainer = $graph.find('.graph-bars'),
$markers = $('.markers'),
$graphTitles = $('.graph-titles'),
max = null,
limit = null;
var init = function(data){
max = getMaxValue(data);
limit = max + Math.ceil(max * 0.05);
$barContainer.empty();
$markers.empty();
$graphTitles.empty();
$('#urgent-title').text(urgentTitle);
setMarkers($markers, limit);
if (data.length) buildTeamRows($barContainer, $graphTitles, data, limit);
else buildUserRows($barContainer, $graphTitles, data, limit);
};
// return a values percentage in relation to the limit
var getPercentage = function(value, limit) {
return value / limit * 100 + "%";
};
var getMaxValue = function(data) {
var largest = 0;
var sum = 0;
if (data.length) {
for (x=0;x<data.length;x++) {
sum = data[x].active + data[x].newCount + data[x].newFromBatch;
if (sum > largest) {
largest = sum;
}
}
} else {
largest = Math.max(data.active, data.newCount, data.newFromBatch);
}
return largest;
};
var setMarkers = function($selector, limit) {
var increment = limit / 5;
var value = 0;
var values = [];
var leftOffset = 0;
// Create array of marker values
while(value < limit) {
values.push(Math.round(value));
value += increment;
}
values.push(limit);
for (var x=0;x<values.length;x++) {
var $markerTmpl = $('<div class="marker"><span class="marker-number"></span></div>');
leftOffset = getPercentage(values[x], limit);
$markerTmpl.css({ 'left': leftOffset }).find('.marker-number').text(values[x]);
$selector.append($markerTmpl);
}
$selector.addClass('loaded');
};
//Build each individual graph based on selector, data, and max value
var buildTeamRows = function($barSelector, $titleSelector, data, limit) {
var percentage;
// Loop through data
for (var x=0;x<data.length;x++) {
var titleClass = null;
var titleCount = 0;
var $graphBar = $('<div class="graph-bar"></div>')
.attr('id', 'userGraph-' + data[x].userId);
$barSelector.append($graphBar);
// Render each fragment
renderFragment($graphBar, 'urgent', data[x].urgent, limit);
renderFragment($graphBar, 'active', data[x].active - data[x].urgent, limit);
renderFragment($graphBar, 'newCount', data[x].newCount, limit);
renderFragment($graphBar, 'newFromBatch', data[x].newFromBatch, limit);
// Calculate largest fragment value
var largest = 0;
$.each(data[x], function(index, value){
if ($.isNumeric(value)){
if (value > largest) {
largest = value;
titleClass = index;
titleCount = value;
}
}
});
// If Active is greatest value, Check if urgent portion of active is greater than active
if (titleClass === 'active' && data[x].urgent >= (data[x].active - data[x].urgent)) {
titleClass = 'urgent';
titleCount = data[x].urgent;
}
// Render row meta-data
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(data[x].userName);
$titleSet.find('.graph-title-count').addClass(titleClass).text(titleCount);
$titleSelector.append($titleSet);
}
};
var renderFragment = function($selector, type, value, limit) {
var $rowFragmentTmpl = $('<div class="graph-bar-fragment"></div>');
var percentage = getPercentage(value, limit);
$rowFragmentTmpl.attr('data-value', value);
$selector.append($rowFragmentTmpl.addClass(type));
setTimeout(function(){
$rowFragmentTmpl.css({'width': percentage});
}, 1);
};
var buildUserRows = function($barSelector, $titleSelector, data, limit) {
renderUserRow($barSelector, $titleSelector, 'urgent', data.urgent, limit, urgentTitle);
renderUserRow($barSelector, $titleSelector, 'active', data.active, limit, 'Active');
renderUserRow($barSelector, $titleSelector, 'newCount', data.newCount, limit, 'New');
renderUserRow($barSelector, $titleSelector, 'newFromBatch', data.newFromBatch, limit, 'New From Batch');
};
var renderUserRow = function($barSelector, $titleSelector, type, value, limit, title) {
var percentage = getPercentage(value, limit);
var $graphBar = $('<div class="graph-bar graph-bar-single"></div>').attr({'id' : 'userGraph-' + type, 'data-value': value});
$barSelector.append($graphBar);
setTimeout(function(){
$graphBar.css({'width': percentage}).addClass(type);
},1);
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(title);
$titleSet.find('.graph-title-count').addClass(type).text(value);
$titleSelector.append($titleSet);
};
return {
init: init
}
})();
// Document ready
$(function(){
// Dummy Data
var dataSet = [
{
active: 5,
newCount: 4,
newFromBatch: 40,
urgent: 1,
userId: "molly",
userName: "Molly"
},
{
active: 21,
newCount: 2,
newFromBatch: 5,
urgent: 10,
userId: "jack",
userName: "Jack"
},
{
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "tracy",
userName: "Tracy"
},
{
active: 10,
newCount: 24,
newFromBatch: 4,
urgent: 2,
userId: "nolan",
userName: "Nolan"
},
];
var dataSingle = {
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "ryan",
userName: "Ryan Scofield"
};
// Initialize Graph
graph.init(dataSet);
$('#teamGraph').on('click', function(e){
graph.init(dataSet);
});
$('#userGraph').on('click', function(e){
graph.init(dataSingle);
});
});
body {
padding: 20px;
}
/* Opportunity Graphs */
.graph-titles {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 20px 0 20px;
padding: 0;
}
.graph-title {
margin-bottom: 1em;
width: 100%;
line-height: 30px;
overflow: hidden;
}
.graph-title-name {
float: left;
}
.graph-title-count {
float: right;
padding: 0 10px;
height: 30px;
border-radius: 20px;
color: #fff;
}
.graph {
display: inline-block;
position: relative;
margin: 20px 20px 20px 10px;
padding: 0;
width: 500px;
}
.graph-bar {
display: block;
overflow: hidden;
margin-bottom: 1em;
}
.graph-bar-fragment {
width: 0;
height: 30px;
float: left;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
}
.graph-bar-single {
height: 30px;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.urgent {
background: #c9575e;
background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41));
background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active {
background: #d6ac6e;
background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52));
background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount {
background: #6db683;
background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d));
background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch {
background: #7f8cc4;
background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac));
background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .4s ease-in;
}
.markers.loaded {
visibility: visible;
opacity: 1;
}
.marker {
-webkit-box-sizing: border-box;
position: absolute;
bottom: -2em;
top: 0;
border-left: 2px solid #e6e6e6;
}
.marker-number {
position: absolute;
padding-left: .5em;
bottom: 0;
text-align: right;
}
.marker:last-child .marker-number {
right: 0;
padding-left: 0;
padding-right: .5em;
}
.graph-key {
margin: 20px 0 0 210px;
}
.graph-key-item {
display: inline-block;
margin-right: 1.5em;
}
.graph-key-dot {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
margin-right: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-container">
<div class="graph-titles">
<!-- Populated -->
</div>
<div class="graph">
<div class="graph-bars">
<!-- Populated -->
</div>
<div class="markers">
<!-- Populated -->
</div>
</div>
<div class="graph-key">
<div class="graph-key-item">
<span class="graph-key-dot urgent"></span><span id="urgent-title">Urgent</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot active"></span><span>Active</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newCount"></span><span>New</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newFromBatch"></span><span>New From Batch</span>
</div>
</div>
</div>
<button id="teamGraph">Team Graph</button>
<button id="userGraph">User Graph</button>

Try below chart and change value as per your requirement
var chart = new Chartist.Bar('#chart01',
{
labels: ['C-Level', 'Executive', 'Director', 'Manager', 'Professional', 'Other'],
series: [
[3,9,5,8,4,2],
[2,8,4,19,25,6],
[2,16,6,53,57,12]
]
},
{
stackBars: true,
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
low: 0,
fullWidth: true,
chartPadding: {
right: 30,
left: 30
},
axisX: {
showGrid: true,
showLabel: true
},
axisY: {
showGrid: false,
showLabel: true,
offset: 60,
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value;
}
}
});
$('#chart01').on('click', '.ct-chart-bar .ct-labels foreignobject', function(evt) {
var index = $(this).index();
var label = $(this).find('span.ct-label').text();
graphClicked(index, label, null);
});
$('#chart01').on('mouseover', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').addClass('hover');
});
$('#chart01').on('mouseleave', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').removeClass('hover');
});
$('#chart01').on('click', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
var label = $(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').text();
var value = $(this).attr('ct:value');
graphClicked(index, label, value);
});
function graphClicked(index, label, value) {
console.log('---');
console.log('index:', index);
console.log('label:', label);
alert('Index: '+index+', Label: '+label+', Value: '+value);
}
html {
background-color: lightgrey;
}
.chart-wrapper {
width: 50%;
margin: 1rem auto;
background-color: white;
padding: 0.1rem 0.5rem 1rem 0.5rem;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
.center-link {
text-align: center;
display: block;
font-size: 0.7rem;
}
.ct-line {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
}
.ct-series-a .ct-line {
animation: dash 5s linear forwards;
animation-delay: 1s;
}
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-bar {
stroke: #5b9bd5;
}
.ct-series-b .ct-line {
animation: dash 5s linear forwards;
animation-delay: 2s;
}
.ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-bar {
stroke: #ed7d31;
}
.ct-series-c .ct-line {
animation: dash 5s linear forwards;
animation-delay: 3s;
}
.ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-bar {
stroke: #a5a5a5;
}
.chart-title {
text-align: center;
color: #555;
margin-bottom: 0.5rem;
}
.key {
font-size: 0.7rem;
color: #555;
padding: 0 30px 0 90px;
}
.key .key-element {
width: 32%;
display: inline-block;
padding-left: 22px;
box-sizing: border-box;
position: relative;
}
.key .key-element:before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -2px;
left: 0;
}
.key .key-element.key-series-a:before {
background-color: #5b9bd5;
}
.key .key-element.key-series-b:before {
background-color: #ed7d31;
}
.key .key-element.key-series-c:before {
background-color: #a5a5a5;
}
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
display: block;
position: relative;
left: -50%;
text-align: center;
}
.ct-chart-bar .ct-labels foreignobject {
cursor: pointer;
}
.ct-chart-bar .ct-labels foreignobject span {
text-decoration: none;
}
.ct-chart-bar .ct-labels foreignobject span:hover, .ct-chart-bar .ct-labels foreignobject span.hover {
text-decoration: underline;
}
.ct-chart-bar .ct-series line {
cursor: pointer;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />
<div class="chart-wrapper">
<h4>Click on the bars to get their index, label and value</h4>
<div id="chart01" class="ct-chart ct-chart01 ct-octave"></div>
<div class="key">
<div class="key-element key-series-a">Account Topic Score</div>
<div class="key-element key-series-b">#Unique Contacts</div>
<div class="key-element key-series-c">#Interactions</div>
</div>
</div>

Manipulate :before pseudoclass's background with jQuery

I've seen several work arounds on StackOverflow however none of which seem to be a sufficient answer for what I am looking to achieve.
Live Demo:
var value = 0,
pos = 0,
progressHidden = false,
progressEl = $('progress'),
timer = setInterval(progress, 100);
var ProgressColourTween = [
"#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
"#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
"#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
"#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
"#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
"#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
"#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
"#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
"#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
"#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];
function progress() {
// run counter
value++;
if (value <= 100) {
progressEl.val(value);
progressEl.css("background-color", ProgressColourTween[value]);
pos = 1 - (value / 100);
if (value == '10') {
$('progress').addClass('ten');
}
if (value == '100') {
$('progress').addClass('hundred');
}
}
// update background
progressEl.css('background-position', '0 ' + pos + 'em');
// show/hide progress
if (progressHidden && value < 100) {
progressEl.val(0);
progressEl.removeClass("hidden");
progressHidden = false;
}
}
body {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 50px;
background: #000000;
}
progress {
appearance: none;
position: relative;
width: 450px;
height: 1.4em;
padding: 0;
border: none;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 120px;
transition: height .4s;
}
progress.hidden {
height: 0;
transition-delay: .4s;
}
progress::before {
content: attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
text-align: center;
font-size: 1.5em;
line-height: .80em;
color: hsla(0, 0%, 100%, .2);
background: linear-gradient( green, orange) no-repeat center;
background: -moz-linear-gradient( green, orange) no-repeat center;
background: -webkit-linear-gradient( green, orange) no-repeat center;
background: -o-linear-gradient( green, orange) no-repeat center;
background: -ms-linear-gradient( green, orange) no-repeat center;
background-position: inherit;
-webkit-background-clip: text;
background-clip: text;
}
progress::after {
content: '%';
position: absolute;
top: 0;
right: 190px;
bottom: 0;
text-align: center;
font-size: 1.5em;
line-height: .80em;
color: hsla(0, 0%, 100%, .2);
background: linear-gradient( green, orange) no-repeat center;
background: -moz-linear-gradient( green, orange) no-repeat center;
background: -webkit-linear-gradient( green, orange) no-repeat center;
background: -o-linear-gradient( green, orange) no-repeat center;
background: -ms-linear-gradient( green, orange) no-repeat center;
background-position: inherit;
-webkit-background-clip: text;
background-clip: text;
}
progress.ten::after {
right: 100px;
}
progress.hundred::after {
right: 0px;
}
progress::-webkit-progress-bar,
progress::-webkit-progress-value {
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress max="99"></progress>
My Problem
I've added my colour tween to progressEl = $('progress'), however it needs to somehow be applied to .progress:before
Question
How can I add the colour tween to my loading percentage text which is manipulated via the .progress:before background?

There is no way to say $('.progress:before') but you can add another class for you progress element in you style sheet and using addClass(). Or you can do something like this:
var porgress_before = $("<style>").appendTo("head");
// And then you can use below function on any where to style your element.
porgress_before.text(".progress:before{ background: red;}");
Good luck!

Don't have time to write out the code for you, but you can dynamically create a style tag at the bottom of the head, then create and insert a new rule that applies to the :before element in question.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
This will pass back an index value you can use to look up the actual CSSStyleRule object. You can then manipulate that object's style property like you would the style property of an element
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule

jQuery - mousemove for Mobile

I am trying to recreate the same effect showed below on mobile devices.
I have tried to use .vmousemove however, the div only move when I touch and realise. What I am trying to achieve is that the div follows the finger movement on screen.
Is this something possible to achieve with jQuery?
Also I can I centre the mouse in the middle of the div?
$('#cont').mousemove(function(e) {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
});
#cont {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.gray {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: url('img/grid.png');
opacity: 0.9;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5defb2+0,edd92d+46,d156ea+57,7eea9b+100 */
background: rgb(93, 239, 178);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(93, 239, 178, 1) 0%, rgba(237, 217, 45, 1) 46%, rgba(209, 86, 234, 1) 57%, rgba(126, 234, 155, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5defb2', endColorstr='#7eea9b', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="cont">
<div class="gray"></div>
</div>

var timer;
$('#cont').mousemove(function(e) {
timer = window.setTimeout(function() {
var offs = $(this).offset(),
p = {
x: offs.left,
y: offs.top
},
mPos = {
x: e.pageX,
y: e.pageY
},
x = mPos.x - p.x - 100,
y = mPos.y - p.y - 100;
$('.gray', this).css({
left: x,
top: y,
backgroundPosition: -x + 'px ' + -y + 'px'
});
},10000)
return false;
})
I am not sure if it works or not just idea