Related
import {css, html, LitElement} from 'lit';
class AnalogClock extends LitElement {
static get properties() {
return {
time: {type: Date},
interval: {type: Object}
};
}
static get styles() {
return css`
.clock {
width: 30rem;
height: 30rem;
border: 7px solid #282828;
box-shadow: -4px -4px 10px rgba(67,67,67,0.5),
inset 4px 4px 10px rgba(0,0,0,0.5),
inset -4px -4px 10px rgba(67,67,67,0.5),
4px 4px 10px rgba(0,0,0,0.3);
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
}
.outer-clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 100%;
background: #282828;
overflow: hidden;
}
.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}
.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #1df52f;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #bdbdcb;
width: 3px;
}
.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg)
}
.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg)
}
.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg)
}
.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg)
}
.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}
.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #4d4b63;
z-index: 11;
}
.hand {
width: 50%;
right: 50%;
height: 6px;
background: #61afff;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hand.hour-hand {
width: 30%;
z-index: 3;
}
.hand.min-hand {
height: 3px;
z-index: 10;
width: 40%;
}
.hand.second-hand {
background: #ee791a;
width: 45%;
height: 2px;
}
`;
}
render() {
return html`
<div class="clock">
<div class="outer-clock-face">
<div class="marking marking-one"></div>
<div class="marking marking-two"></div>
<div class="marking marking-three"></div>
<div class="marking marking-four"></div>
<div class="inner-clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
</div>
`;
}
setDate(time) {
const secondHand = this.shadowRoot.querySelector('.second-hand');
const minsHand = this.shadowRoot.querySelector('.min-hand');
const hourHand = this.shadowRoot.querySelector('.hour-hand');
const now = time;
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
constructor() {
super();
this.time = new Date();
this.updateComplete.then(() => {
this.setDate(this.time);
this.interval = setInterval(() => {
this.time = new Date(this.time.setSeconds(this.time.getSeconds() + 1));
this.setDate(this.time);
}, 1000);
}
);
}
}
window.customElements.define('analog-clock', AnalogClock);
My component class
The view where I bring the clock in
The result of bringing the clock into the application, which has removed all my previous styles
The clock is a JavaScript file which I have very little experience using, I am bringing the clock into my Vaadin application using the spring #JsModule annotation and it appears to be over riding all my current CSS styling. If anyone can shed some light on this it would be much appreciated.
We have to build a clock in JavaScript using divs only, (document.createElement()). Somehow, I never get the positioning of the divs right. Currently, I'm already struggling to make the first DIV.
Sorry if I have mistakes in the calculation of the angles.
Are there any better ways to achieve this goal?
Now it looks a bit like this:
The red lines are representing the numbers of a clock (12 of them in total).
window.onload = function drawclock() {
var clock = this.document.getElementById("clock");
var width = clock.offsetHeight;
var radius = width / 2;
for (var i = 1; i < 12; i++) {
var element = document.createElement("DIV");
addClass(element, "h");
addClass(element, i);
var deg = 30 * i;
var x = Math.cos(deg * (180 / Math.PI)) * radius + radius;
var y = Math.sin((90 - deg) * (180 / Math.PI)) * radius + radius;
console.log(x + " " + y);
element.style.position = "absolute";
element.style.left = x + "px";
element.style.top = y + "px";
element.style.transform = "rotate(" + deg + "deg)";
clock.appendChild(element);
}
}
function addClass(element, name) {
var arr;
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #000;
}
#clock {
height: 500px;
width: 500px;
background-color: #DDDDDD;
border-radius: 100%;
position: absolute;
}
.h {
width: 10px;
height: 70px;
background-color: red
}
.m {
width: 5px;
height: 80px;
background-color: blue
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<div id="clock">
</div>
</body>
</html>
Here is a clock example made by Eric Brewer on CodePen.
I have compiled SCSS and Pug keeping only the necessary parts of the code to make the clock work. This version doesn't require any JavaScript to run.
However, I have added some JavaScript code to make it start from a particular position. This can be achieved using the class Date to get the current date and setting the animation-delay CSS property with the property animationDelay for each clock arms.
Here is the working code:
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}
setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
.number:nth-child(1) {
transform: rotate(25deg);
}
.number:nth-child(1) span {
display: block;
transform: rotate(-25deg);
}
.number:nth-child(2) {
transform: rotate(55deg);
}
.number:nth-child(2) span {
display: block;
transform: rotate(-55deg);
}
.number:nth-child(3) {
transform: rotate(85deg);
}
.number:nth-child(3) span {
display: block;
transform: rotate(-85deg);
}
.number:nth-child(4) {
transform: rotate(115deg);
}
.number:nth-child(4) span {
display: block;
transform: rotate(-115deg);
}
.number:nth-child(5) {
transform: rotate(145deg);
}
.number:nth-child(5) span {
display: block;
transform: rotate(-145deg);
}
.number:nth-child(6) {
transform: rotate(178deg);
}
.number:nth-child(6) span {
display: block;
transform: rotate(-175deg);
}
.number:nth-child(7) {
transform: rotate(205deg);
}
.number:nth-child(7) span {
display: block;
transform: rotate(-205deg);
}
.number:nth-child(8) {
transform: rotate(235deg);
}
.number:nth-child(8) span {
display: block;
transform: rotate(-235deg);
}
.number:nth-child(9) {
transform: rotate(265deg);
}
.number:nth-child(9) span {
display: block;
transform: rotate(-265deg);
}
.number:nth-child(10) {
transform: rotate(295deg);
}
.number:nth-child(10) span {
display: block;
transform: rotate(-295deg);
}
.number:nth-child(11) {
transform: rotate(325deg);
}
.number:nth-child(11) span {
display: block;
transform: rotate(-325deg);
}
.number:nth-child(12) {
transform: rotate(355deg);
}
.number:nth-child(12) span {
display: block;
transform: rotate(-355deg);
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second .body {
display: block;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: red;
z-index: 4;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers">
<div class="number number-1"><span>1</span></div>
<div class="number number-2"><span>2</span></div>
<div class="number number-3"><span>3</span></div>
<div class="number number-4"><span>4</span></div>
<div class="number number-5"><span>5</span></div>
<div class="number number-6"><span>6</span></div>
<div class="number number-7"><span>7</span></div>
<div class="number number-8"><span>8</span></div>
<div class="number number-9"><span>9</span></div>
<div class="number number-10"><span>10</span></div>
<div class="number number-11"><span>11</span></div>
<div class="number number-12"><span>12</span></div>
</div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
<div class="body"></div>
</div>
</div>
</div>
</div>
Simply set the current date in date, the JavaScript code will loop through the clock's arms and delay each animation. CSS animation will allow the clock to run continuously after page has been loaded.
This method is a lot more efficient than using a JavaScript function to compute the positions and move clock hands. CSS animations are way more powerful here.
EDIT :
When you're programming a piece of code you should always start with a piece of paper and define what you want, how you will achieve it before starting typing. You have to have a plan before typing, otherwise, it will simply not work.
So as you told me you only want to position the number ticks (the original question wasn't that clear...). It's easier to have all ticks as black rectangles positioned in the center, set their height and width. So we have:
Then use the transform property to rotate each tick to the right angle: 0°, 30°, 60°, 90°, ..., 300°, 330° and 360°. Use rotate(x deg).
Lastly here's the trick to the set the ticks' size correctly:
use a gradient to hide the part of the tick closer to the center so we only show the tip of each tick:
background: linear-gradient(
to top,
#eee 0%,
#eee 80%,
black 80%,
black 100%
);
In the end you should have:
Combining this with the previous code to make the clock turn you get:
let drawTicks = function() {
for (let i = 1; i < 13; i++) {
let el = document.createElement('div');
el.setAttribute('class', `number number${i}`);
el.style.transform = `rotate(${i*30}deg)`;
document.querySelector('.numbers').appendChild(el);
}
}; drawTicks()
let setTime = function(date) {
const delay = [
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
date.getMinutes() * 60 + date.getSeconds(),
date.getSeconds()
];
[...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);
}; setTime(new Date())
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Main style for the clock */
.face {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 400px;
height: 400px;
background: #eee;
border-radius: 50%;
padding: 20px;
border: 20px solid #d9d9d9;
}
.face:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
z-index: 3;
}
/* Numbers: styling and positioning */
.numbers {
position: relative;
}
.number {
width: 5px;
background: linear-gradient( to top, #eee 0%, #eee 80%, black 80%, black 100%);
position: absolute;
height: 200px;
transform-origin: 0 100%;
font-size: 28px;
}
/* Clock hands styling */
.hands {
position: absolute;
top: 50%;
left: 50%;
}
.hand {
position: absolute;
top: 50%;
left: 50%;
height: 120px;
width: 10px;
content: "";
background: black;
transform: translate(-50%, -100%);
border-radius: 0 0 20px 20px;
transform-origin: 50% 100%;
z-index: 4;
animation: count 3600s linear infinite;
}
.hand:before {
display: block;
position: absolute;
top: -50px;
width: 0;
height: 0;
border: 10px solid transparent;
border-width: 10px 5px 41px;
border-bottom-color: black;
content: "";
}
.hand.hand-hour {
height: 70px;
transform: translate(-50%, -100%) rotate(30deg);
animation: count 43200s linear infinite;
}
.hand.hand-second {
height: 130px;
width: 8px;
transform: translate(-50%, -100%) rotate(60deg);
z-index: 3;
background: red;
animation: count 60s linear infinite;
}
.hand.hand-second:before {
border-width: 10px 4px 41px;
border-bottom-color: red;
z-index: -1;
}
/* animation of the clock hands */
#keyframes count {
0%,
100% {
transform: translate(-50%, -100%);
}
25% {
transform: translate(-50%, -100%) rotate(90deg);
}
50% {
transform: translate(-50%, -100%) rotate(180deg);
}
75% {
transform: translate(-50%, -100%) rotate(270deg);
}
}
<div class="watch">
<div class="face">
<div class="numbers"></div>
<div class="hands">
<div class="hand hand-hour"></div>
<div class="hand hand-minute"></div>
<div class="hand hand-second">
</div>
</div>
</div>
</div>
Error
Uncaught 'TypeError': ".goal_test".click is not a function
Code is Share in here
https://codeshare.io/aJAoeR
code which i have added is in between asterisk marks
I just made some edit to your code and everything seems to work. Do this match what you intend to achieve?
var app = angular.module('app', []);
app.controller('HomeController', function($scope) {
$scope.goal_title = "Investing in real estate";
$scope.dates = [
2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2026
];
$scope.goal_real_estate = false;
for (x in $scope.dates) {
if ($scope.dates[x] == 2016) {
$scope.goal_real_estate_2016 = true;
} else if ($scope.dates[x] == 2021) {
$scope.goal_retirement_2021 = true;
} else if ($scope.dates[x] == 2018) {
$scope.goal_involve_2018 = true;
} else if ($scope.dates[x] == 2026) {
$scope.goal_test_2026 = true;
}
}
});
$(document).ready(function(e) {
var viewport = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
console.log(viewport);
$('a').click(function(e) {
e.preventDefault()
})
$('.goal_wrap').click(function() {
var diff = $(this).parent()[0].offsetLeft;
$('.date .goal_wrap').removeClass('active bounce');
$(this).addClass('active bounce');
console.log(diff);
console.log((viewport - diff));
TweenLite.to($('.date').parent(), 1, {
x: ((viewport * 0.5) - diff),
onComplete: function() {
console.log('success');
/*TweenLite.to($('.timeline'), 1, {top:"50%"});*/
}
});
});
$('.goal_real_estate').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg)');
}).fadeTo('slow', 1);
});
$('.goal_retirement').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(https://wallpaperscraft.com/image/tropics_sea_palm_trees_vacation_84858_2412x1810.jpg)');
}).fadeTo('slow', 1);
});
$('.goal_involve').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(http://www.churchmilitant.com/images/uploads/2015-06-12-niles-x.jpg)');
}).fadeTo('slow', 1);
});
// test
$('.goal_test').click(function() {
console.log('goal click');
$('body').fadeTo('ease', 0.3, function() {
$(this).css('background-image', 'url(http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg))');
}).fadeTo('slow', 1);
});
// end of test
});
body {
overflow: hidden;
padding: 0;
margin: 0;
transition: all 1s ease;
}
body {
background: url('http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg') no-repeat fixed center;
background-size: cover;
}
body::before {
content: '';
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
a {
color: #fff;
text-decoration: none;
}
.timeline {
position: absolute;
bottom: 0;
top: 100;
width: 3000px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
border-top: 1px solid #fff;
padding-left: 80px;
}
.date {
color: #fff;
float: left;
width: 150px;
height: 50px;
/*padding-left: 80px;*/
}
.date::before {
content: '';
position: absolute;
height: 100vh;
width: 1px;
background: rgba(255, 255, 255, 0.7);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
/*Safari 5.1-6*/
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
/*Opera 11.1-12*/
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
/*Fx 3.6-15*/
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 1));
/*Standard*/
margin-top: -100vh;
}
p.focus {
position: absolute;
top: 0;
margin-left: -14px;
padding-top: 10px;
}
p.focus::before {
content: '';
width: 20px;
height: 20px;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
top: -10px;
left: 3.5px;
}
p.focus::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
top: -5px;
left: 9px;
}
.goal_wrap {
position: absolute;
width: 50px;
height: 50px;
border: 2px solid #fff;
text-align: center;
border-radius: 50%;
line-height: 50px;
top: -100px;
margin-left: -24px;
font-size: 24px;
transition: all 0.5s ease;
}
.goal_wrap:hover {
width: 60px;
height: 60px;
line-height: 60px;
margin-left: -30px;
font-size: 30px;
cursor: pointer;
}
.goal_wrap.active {
top: -160px;
width: 80px;
height: 80px;
line-height: 80px;
margin-left: -40px;
font-size: 40px;
cursor: pointer;
}
.bounce {
animation: bounce 1s .5s;
transform: scale(0.85);
}
#keyframes bounce {
0% {
transform: scale(0.85);
opacity: 1;
}
50% {
transform: scale(0.95);
opacity: .7;
}
60% {
transform: scale(0.6);
opacity: 1;
}
80% {
transform: scale(1.6)
}
100% {
transform: scale(1.1)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Timeline Sequence V1</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="structure" ng-app="app" ng-controller="HomeController">
<div class="preloaderimg">
<img src="https://wallpaperscraft.com/image/tropics_sea_palm_trees_vacation_84858_2412x1810.jpg" alt="" style="display: none;" />
<img src="http://extrawall.net/images/wallpapers/378_1920x1080_abstract_city.jpg" alt="" style="display: none;" />
<img src="http://www.churchmilitant.com/images/uploads/2015-06-12-niles-x.jpg" alt="" style="display: none;" />
</div>
<div class="timeline"></div>
<div class="timeline">
<div ng-repeat="date in dates track by $index" class="date date-{{$index}}">
<div class="goal_wrap goal_real_estate" ng-show="goal_real_estate_{{date}}">
<i class="fa fa-building" aria-hidden="true"></i>
</div>
<div class="goal_wrap goal_involve" ng-show="goal_involve_{{date}}">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</div>
<div class="goal_wrap goal_retirement" ng-show="goal_retirement_{{date}}">
<i class="fa fa-leaf" aria-hidden="true"></i>
</div>
***********************************
<!-- test -->
<div class="goal_wrap goal_test" ng-show="goal_test_{{date}}">
<i class="fab fa-accusoft" aria-hidden="true"></i>
</div>
************************************
<!--end test -->
<p class="focus">
{{date}}
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>{{goal_title}}</h1>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I'm trying to use a jsfiddle to my page, but I can't figure out how embed it with my existing code.
JSFiddle
HTML
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage">
<div class="numbers"><span>-</span><span>0</span><span>0,1</span><span>0,2</span><span>0,3</span><span>0,4</span><span>0,5</span><span>0,6</span><span>0,7</span><span>0,8</span><span>0,9</span><span>1</span><span>1,1</span><span>1,2</span><span>1,3</span><span>1,4</span><span>1,5</span><span>1,6</span><span>1,7</span><span>1,8</span><span>1,9</span><span>2</span><span>2,1</span><span>2,2</span><span>2,3</span><span>2,4</span><span>2,5</span><span>2,6</span><span>2,7</span><span>2,8</span><span>2,9</span><span>3</span><span>3,1</span><span>3,2</span><span>3,3</span><span>3,4</span><span>3,5</span><span>3,6</span><span>3,7</span><span>3,8</span><span>3,9</span><span>4</span><span>4,1</span><span>4,2</span><span>4,3</span><span>4,4</span><span>4,5</span><span>4,6</span><span>4,7</span><span>4,8</span><span>4,9</span><span>5</span><span>5,1</span><span>5,2</span><span>5,3</span><span>5,4</span><span>5,5</span><span>5,6</span><span>5,7</span><span>5,8</span><span>5,9</span><span>6</span><span>6,1</span><span>6,2</span><span>6,3</span><span>6,4</span><span>6,5</span><span>6,6</span><span>6,7</span><span>6,8</span><span>6,9</span><span>7</span><span>7,1</span><span>7,2</span><span>7,3</span><span>7,4</span><span>7,5</span><span>7,6</span><span>7,7</span><span>7,8</span><span>7,9</span><span>8</span><span>8,1</span><span>8,2</span><span>8,3</span><span>8,4</span><span>8,5</span><span>8,6</span><span>8,7</span><span>8,8</span><span>8,9</span><span>9</span><span>9,1</span><span>9,2</span><span>9,3</span><span>9,4</span><span>9,5</span><span>9,6</span><span>9,7</span><span>9,8</span><span>9,9</span><span>10</span></div>
</div>
</div>
JS
$evaluation = 8,5;
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', $evaluation*10);
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
CSS
.radial-progress {
#circle-size: 120px;
#circle-background: #d6dadc;
#circle-color: #97a71d;
#inset-size: 90px;
#inset-color: #fbfbfb;
#transition-length: 1s;
#shadow: 6px 6px 10px rgba(0,0,0,0.2);
#percentage-color: #97a71d;
#percentage-font-size: 22px;
#percentage-text-width: 57px;
margin: 50px;
width: #circle-size;
height: #circle-size;
background-color: #circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: #circle-size;
height: #circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: #shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform #transition-length;
transition: -ms-transform #transition-length;
transition: transform #transition-length;
border-radius: 50%;
}
.mask {
clip: rect(0px, #circle-size, #circle-size, #circle-size/2);
.fill {
clip: rect(0px, #circle-size/2, #circle-size, 0px);
background-color: #circle-color;
}
}
}
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: (#circle-size - #inset-size)/2;
margin-top: (#circle-size - #inset-size)/2;
background-color: #inset-color;
border-radius: 50%;
box-shadow: #shadow;
.percentage {
height: #percentage-font-size;
width: #percentage-text-width;
overflow: hidden;
position: absolute;
top: (#inset-size - #percentage-font-size) / 2;
left: (#inset-size - #percentage-text-width) / 2;
line-height: 1;
.numbers {
margin-top: -#percentage-font-size;
transition: width #transition-length;
span {
width: #percentage-text-width;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 800;
font-size: #percentage-font-size;
color: #percentage-color;
}
}
}
}
#i: 0;
#increment: 180deg / 100;
.loop (#i) when (#i <= 100) {
&[data-progress="#{i}"] {
.circle {
.mask.full, .fill {
-webkit-transform: rotate(#increment * #i);
-ms-transform: rotate(#increment * #i);
transform: rotate(#increment * #i);
}
.fill.fix {
-webkit-transform: rotate(#increment * #i * 2);
-ms-transform: rotate(#increment * #i * 2);
transform: rotate(#increment * #i * 2);
}
}
.inset .percentage .numbers {
width: #i * #percentage-text-width + #percentage-text-width;
}
}
.loop(#i + 1);
}
.loop(#i);
}
The problem is that I'm trying to embed this code in a php function that returns a content string.
So, every HTML in the function is a concatenation in the content string, like this:
$content .= ' <div class="etc....." ';
The page is correctly showed (no problem with script location and concatenation) but I receive the echo of the span content in numbers class.
The output is this:
-00,10,20,30,40,50,60,70,80,911,11,21,31,41,51,61,71,81,922,12,22,32,42,52,62,72,82,933,13,23,33,43,53,63,73,83,944,14,24,34,44,54,64,74,84,955,15,25,35,45,55,65,75,85,966,16,26,36,46,56,66,76,86,977,17,27,37,47,57,67,77,87,988,18,28,38,48,58,68,78,88,999,19,29,39,49,59,69,79,89,910
I think that the javascript function is incompatible with the HTML contained in a string.
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script type="text/javascript">
$(function () {
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
});
</script>
I try to use this code http://jsfiddle.net/andsens/Yns9P/ but my console say less is not defined, happening at the line of less.refreshStyles();. I also tried to include it at the body, still giving me the same error.
I had the same "Less is not defined" issue trying to get that exact code to work locally. I was also looking at the jsfiddle from this tutorial on radial progress bars with CSS.
After wrestling my way through the tutorial again to try and find what I missed I came across the authors GIT for the tutorial blog.
I don't know much about Less, I was just tinkering around.
Here is code that got things running in the end.
So it seems like I missed the tag:
<style type="text/less><style>
Here is the full code from the git page:
<!DOCTYPE html>
<html>
<head>
<style type="text/less">
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
#circle-size: 120px;
#circle-background: #d6dadc;
#circle-color: #97a71d;
#inset-size: 90px;
#inset-color: #fbfbfb;
#transition-length: 1s;
#shadow: 6px 6px 10px rgba(0,0,0,0.2);
#percentage-color: #97a71d;
#percentage-font-size: 22px;
#percentage-text-width: 57px;
margin: 50px;
width: #circle-size;
height: #circle-size;
background-color: #circle-background;
border-radius: 50%;
.circle {
.mask, .fill, .shadow {
width: #circle-size;
height: #circle-size;
position: absolute;
border-radius: 50%;
}
.shadow {
box-shadow: #shadow inset;
}
.mask, .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform #transition-length;
transition: -ms-transform #transition-length;
transition: transform #transition-length;
border-radius: 50%;
}
.mask {
clip: rect(0px, #circle-size, #circle-size, #circle-size/2);
.fill {
clip: rect(0px, #circle-size/2, #circle-size, 0px);
background-color: #circle-color;
}
}
}
.inset {
width: #inset-size;
height: #inset-size;
position: absolute;
margin-left: (#circle-size - #inset-size)/2;
margin-top: (#circle-size - #inset-size)/2;
background-color: #inset-color;
border-radius: 50%;
box-shadow: #shadow;
.percentage {
height: #percentage-font-size;
width: #percentage-text-width;
overflow: hidden;
position: absolute;
top: (#inset-size - #percentage-font-size) / 2;
left: (#inset-size - #percentage-text-width) / 2;
line-height: 1;
.numbers {
margin-top: -#percentage-font-size;
transition: width #transition-length;
span {
width: #percentage-text-width;
display: inline-block;
vertical-align: top;
text-align: center;
font-weight: 800;
font-size: #percentage-font-size;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #percentage-color;
}
}
}
}
#i: 0;
#increment: 180deg / 100;
.loop (#i) when (#i <= 100) {
&[data-progress="#{i}"] {
.circle {
.mask.full, .fill {
-webkit-transform: rotate(#increment * #i);
-ms-transform: rotate(#increment * #i);
transform: rotate(#increment * #i);
}
.fill.fix {
-webkit-transform: rotate(#increment * #i * 2);
-ms-transform: rotate(#increment * #i * 2);
transform: rotate(#increment * #i * 2);
}
}
.inset .percentage .numbers {
width: #i * #percentage-text-width + #percentage-text-width;
}
}
.loop(#i + 1);
}
.loop(#i);
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
});
</script>
</head>
<body>
Animate percentage
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage">
<div class="numbers"><span>-</span><span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span>5%</span><span>6%</span><span>7%</span><span>8%</span><span>9%</span><span>10%</span><span>11%</span><span>12%</span><span>13%</span><span>14%</span><span>15%</span><span>16%</span><span>17%</span><span>18%</span><span>19%</span><span>20%</span><span>21%</span><span>22%</span><span>23%</span><span>24%</span><span>25%</span><span>26%</span><span>27%</span><span>28%</span><span>29%</span><span>30%</span><span>31%</span><span>32%</span><span>33%</span><span>34%</span><span>35%</span><span>36%</span><span>37%</span><span>38%</span><span>39%</span><span>40%</span><span>41%</span><span>42%</span><span>43%</span><span>44%</span><span>45%</span><span>46%</span><span>47%</span><span>48%</span><span>49%</span><span>50%</span><span>51%</span><span>52%</span><span>53%</span><span>54%</span><span>55%</span><span>56%</span><span>57%</span><span>58%</span><span>59%</span><span>60%</span><span>61%</span><span>62%</span><span>63%</span><span>64%</span><span>65%</span><span>66%</span><span>67%</span><span>68%</span><span>69%</span><span>70%</span><span>71%</span><span>72%</span><span>73%</span><span>74%</span><span>75%</span><span>76%</span><span>77%</span><span>78%</span><span>79%</span><span>80%</span><span>81%</span><span>82%</span><span>83%</span><span>84%</span><span>85%</span><span>86%</span><span>87%</span><span>88%</span><span>89%</span><span>90%</span><span>91%</span><span>92%</span><span>93%</span><span>94%</span><span>95%</span><span>96%</span><span>97%</span><span>98%</span><span>99%</span><span>100%</span></div>
</div>
</div>
</div>
</body>
</html>
Hope this helps.