@internetstiftelsen/styleguide 2.22.3 → 2.23.1

package/dist/organisms/video-guide/video-guide.js

@@ -0,0 +1,312 @@
+'use strict';
+
+var video = document.querySelector('.js-video-guide');
+var playBtn = document.querySelector('.js-play-btn');
+var playIcon = document.querySelector('.js-play-icon');
+var pauseIcon = document.querySelector('.js-pause-icon');
+var subtitlesBtn = document.querySelector('.js-subtitles-btn');
+var abortButton = document.querySelector('.js-abort-guide');
+var subtitlesElement = document.getElementById('video-subtitles');
+var subtitlesContainer = document.querySelector('.js-subtitles-container');
+var locationList = document.querySelector('.js-chapters');
+var chapterTrackElement = document.getElementById('video-chapters');
+var trackMetadataElement = document.getElementById('video-metadata');
+var subtitlesTrack = subtitlesElement === null ? '' : subtitlesElement.track;
+var chapterTrack = chapterTrackElement === null ? '' : chapterTrackElement.track;
+var metadataTrack = trackMetadataElement === null ? '' : trackMetadataElement.track;
+var forwardsButton = document.querySelector('.js-next-chapter');
+var backwardsButton = document.querySelector('.js-previous-chapter');
+var timelinePosts = document.querySelectorAll('.js-timeline-post');
+var navigationButton = document.querySelector('.js-show-timelineposts');
+var timeLinePosts = document.querySelector('.js-timeline-posts');
+var currentChapter = 1;
+var manualStep = false;
+var sourceElement = null;
+
+// Has src attributes been set already?
+if (sourceElement) {
+	document.location.reload();
+} else if (video) {
+	var dataSrc = video.dataset.src;
+
+	sourceElement = document.createElement('source');
+	sourceElement.setAttribute('src', dataSrc);
+	sourceElement.setAttribute('type', 'video/mp4');
+
+	video.appendChild(sourceElement);
+
+	// Store current time in on page reload
+	window.addEventListener('unload', function () {
+		// Set localStorage if video has started playing
+		if (video.currentTime > 0) {
+			var currentGuideURL = window.location.href;
+			var currentGuideImage = document.querySelector('.js-guide-continue-image').src;
+			localStorage.setItem('InmsCurrentTime', video.currentTime);
+			localStorage.setItem('InmsDuration', video.duration); // Get totalt duration of video
+			localStorage.setItem('InmsCurrentGuideURL', currentGuideURL);
+			localStorage.setItem('InmsCurrentGuideImage', currentGuideImage);
+		}
+	});
+
+	// Get value from localStorage in present
+	if (localStorage.getItem('InmsCurrentTime')) {
+		var videoCurrentTime = localStorage.getItem('InmsCurrentTime');
+
+		if (videoCurrentTime > 0) {
+			video.currentTime = videoCurrentTime;
+		}
+	}
+
+	// Toggle subtitles
+	if (subtitlesBtn) {
+		subtitlesBtn.addEventListener('click', function () {
+			subtitlesBtn.classList.toggle('is-active');
+			subtitlesContainer.classList.toggle('is-visible');
+		});
+	}
+
+	// Play / pause
+	if (playBtn) {
+		playBtn.addEventListener('click', function () {
+			if (video.paused) {
+				video.play();
+				pauseIcon.classList.remove('is-hidden');
+				playIcon.classList.add('is-hidden');
+				manualStep = false;
+			} else {
+				video.pause();
+				pauseIcon.classList.add('is-hidden');
+				playIcon.classList.remove('is-hidden');
+				manualStep = true;
+			}
+		});
+
+		video.addEventListener('playing', function () {
+			pauseIcon.classList.remove('is-hidden');
+			playIcon.classList.add('is-hidden');
+			manualStep = false;
+		});
+
+		video.addEventListener('ended', function () {
+			pauseIcon.classList.add('is-hidden');
+			playIcon.classList.remove('is-hidden');
+			video.currentTime = 0;
+			currentChapter = 1;
+			manualStep = false;
+			forwardsButton.removeAttribute('disabled');
+			subtitlesContainer.innerHTML = '';
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
+		});
+	}
+
+	if (abortButton) {
+		abortButton.addEventListener('click', function (e) {
+			e.preventDefault();
+			var urlTarget = abortButton.getAttribute('href');
+			video.pause();
+			video.currentTime = 0;
+			forwardsButton.removeAttribute('disabled');
+			currentChapter = 1;
+			manualStep = false;
+			localStorage.removeItem('InmsCurrentTime');
+			localStorage.removeItem('InmsDuration');
+			localStorage.removeItem('InmsCurrentGuideURL');
+			localStorage.removeItem('InmsCurrentGuideImage');
+			window.location.href = urlTarget;
+		});
+	}
+
+	if (navigationButton) {
+		navigationButton.addEventListener('click', function () {
+			navigationButton.classList.toggle('is-toggeled');
+			timeLinePosts.classList.toggle('is-visible');
+		});
+	}
+}
+
+function displayChapters() {
+	if (chapterTrackElement && trackMetadataElement) {
+		// Set all track elements to hidden mode to allow scripting
+		[].forEach.call(video.textTracks, function (txtTrack) {
+			txtTrack.mode = 'hidden';
+		});
+
+		if (chapterTrack.kind === 'chapters') {
+			video.addEventListener('loadedmetadata', function () {
+				// Loop through chapters and create chapter list
+				// Let data load
+				setTimeout(function () {
+					video.classList.remove('is-loading');
+					[].forEach.call(chapterTrack.cues, function (cues) {
+						var chapterName = cues.text;
+						var start = cues.startTime;
+						var newLocale = document.createElement('li');
+						var location = document.createElement('a');
+
+						location.setAttribute('rel', start);
+						newLocale.setAttribute('id', start);
+						location.setAttribute('tabindex', '0');
+
+						// Plain text from the chapter file into HTML text
+						var localeDescription = chapterName;
+						location.innerHTML = localeDescription;
+						newLocale.appendChild(location);
+						locationList.appendChild(newLocale);
+
+						location.addEventListener('click', function () {
+							video.currentTime = location.id;
+						}, false);
+					});
+
+					// If not set in sessionStorgare, set first cue on forward button on page load
+					if (!localStorage.getItem('InmsCurrentTime')) {
+						forwardsButton.setAttribute('data-id', chapterTrack.cues[0].endTime);
+					}
+				}, 100);
+			});
+
+			forwardsButton.addEventListener('click', function () {
+				var dataId = forwardsButton.dataset.id;
+				var currentTime = parseInt(dataId, 10);
+				manualStep = true;
+				currentTime += 1;
+				video.currentTime = currentTime;
+				currentChapter += 1;
+			});
+
+			backwardsButton.addEventListener('click', function () {
+				var dataId = backwardsButton.dataset.id;
+				var lastTime = parseInt(dataId, 10);
+				lastTime -= 1;
+				video.currentTime = lastTime;
+				forwardsButton.removeAttribute('disabled');
+				manualStep = true;
+				currentChapter -= 1;
+
+				if (video.currentTime <= 0) {
+					backwardsButton.removeAttribute('data-id');
+				}
+			});
+
+			chapterTrack.addEventListener('cuechange', function () {
+				// Fire this whenever the chapters changes
+				var myCues = chapterTrack.activeCues;
+				if (myCues.length > 0) {
+					var currentLocation = chapterTrack.activeCues[0].startTime;
+					var nextLocation = chapterTrack.activeCues[0].endTime;
+					var cueMatch = chapterTrack.activeCues[0].text;
+					var matchingCueArray = document.querySelectorAll('[rel="' + currentLocation + '"]');
+
+					// Set Forward and backwards buttons timestamps
+					forwardsButton.setAttribute('data-id', nextLocation);
+					backwardsButton.setAttribute('data-id', currentLocation);
+
+					// Add chapter stepping even when video is played
+					if (manualStep === false) {
+						currentChapter += 1;
+					}
+
+					// Disable forwardsbutton when on last chapter
+					if (currentChapter >= chapterTrack.cues.length) {
+						forwardsButton.setAttribute('disabled', 'disabled');
+					}
+
+					// Handle current and watched items
+					[].forEach.call(matchingCueArray, function (matchingCue) {
+						var thisChapter = matchingCue;
+						if (thisChapter.innerHTML === cueMatch) {
+							var chapter = thisChapter;
+
+							if (chapter === thisChapter) {
+								// get the chapter <li> elements based on the currentLocation
+								var locations = [].slice.call(chapter.closest('figure').querySelectorAll('.js-chapters li'));
+
+								var counter = 0;
+
+								[].forEach.call(locations, function (location) {
+									// remove current classes from all items on page refresh
+									location.classList.remove('is-current-item');
+									location.querySelector('a').classList.remove('is-current');
+
+									if (location.classList.contains('is-current-item')) {
+										counter += 1; // iterate counter when active chapter is reached
+									}
+									if (counter < 1) {
+										// add watched class to everything before the current chapter to show progress
+										location.classList.add('is-watched');
+									} else {
+										// remove watched on all other items
+										location.classList.remove('is-watched');
+									}
+								});
+								chapter.parentNode.classList.add('is-current-item');
+								chapter.classList.add('is-current');
+							}
+						}
+					});
+				}
+			}, false);
+
+			// Get timeline post IDs from metadata.vtt
+			metadataTrack.addEventListener('cuechange', function () {
+				var metadataCues = metadataTrack.activeCues;
+				var chapterCues = chapterTrack.activeCues[0];
+
+				if (metadataCues.length > 0) {
+					var metadataCueMatch = metadataTrack.activeCues[0].text;
+
+					[].forEach.call(timelinePosts, function (timelinePost) {
+						timelinePost.classList.remove('is-current');
+					});
+
+					var idSelectors = document.querySelectorAll('[data-id="' + metadataCueMatch + '"]');
+
+					[].forEach.call(idSelectors, function (idSelector) {
+						idSelector.classList.add('is-current');
+						idSelector.focus();
+					});
+
+					if (chapterCues) {
+						var chapterStartTime = chapterCues.startTime;
+
+						// Let stuff load
+						var listElement = void 0;
+						var timeOut = null;
+
+						setTimeout(function () {
+							listElement = document.getElementById(chapterStartTime);
+						}, 100);
+
+						timeOut = function wait(condition, callback) {
+							if (typeof condition() !== 'undefined' && listElement) {
+								listElement.classList.add('is-current-item');
+							} else {
+								setTimeout(function () {
+									wait(condition, callback);
+								}, 0);
+							}
+						};
+						timeOut(function () {
+							return listElement;
+						}, function () {});
+					}
+				}
+			}, false);
+
+			// Get subtitles cues from subtitles.vtt
+			subtitlesTrack.addEventListener('cuechange', function () {
+				var subtitlesCues = subtitlesTrack.activeCues;
+
+				if (subtitlesCues.length > 0) {
+					var subtitlesCuesMatch = subtitlesTrack.activeCues[0].text;
+					subtitlesContainer.innerHTML = '<span>' + subtitlesCuesMatch + '</span>';
+				}
+			}, false);
+		}
+	}
+}
+
+displayChapters(chapterTrackElement);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.22.3",
+	"version": "2.23.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -26,13 +26,15 @@
 		"watch:icons": "onchange 'src/atoms/icon/*.svg' -- npm run create-icons-config",
 		"watch": "concurrently \"npm:watch:css\" \"npm:watch:js\" \"npm:watch:icons\"",
 		"copy:images": "copyfiles -f src/assets/images/* public/assets/images",
+		"copy:videos": "copyfiles -f src/assets/video/* public/assets/video",
 		"copy:fonts": "copyfiles -f src/base/fonts/* public/assets/fonts",
 		"copy:zip": "copyfiles -f src/assets/zip/* public/assets/zip",
-		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:zip",
+		"copy:local-assets": "npm run copy:images && npm run copy:fonts && npm run copy:videos && npm run copy:zip",
 		"copy:images:build": "copyfiles -f src/assets/images/* build/assets/images",
+		"copy:videos:build": "copyfiles -f src/assets/video/* build/assets/video",
 		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
 		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
-		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build",
+		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
 		"build": "npm run build:css && npm run build:js && npm run uglify && npm run build:fractal && npm run copy:build",
 		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
 		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
@@ -48,6 +50,8 @@
 		"babel-eslint": "^10.0.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
 		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-plugin-transform-custom-element-classes": "^0.1.0",
+		"babel-plugin-transform-es2015-classes": "^6.24.1",
 		"babel-plugin-transform-object-rest-spread": "^6.26.0",
 		"babel-preset-env": "^1.7.0",
 		"browserify": "^16.5.0",

package/src/app.scss

@@ -42,7 +42,6 @@ $namespace: '';
 @import 'atoms/ribbon/ribbon';
 @import 'atoms/quote/quote';
 @import 'atoms/rating/rating';
-@import 'atoms/timeline/timeline';
 
 // Molecules
 @import 'molecules/breadcrumb/breadcrumb';
@@ -65,13 +64,15 @@ $namespace: '';
 @import 'molecules/icon-overlay/icon-overlay';
 @import 'molecules/submenu/submenu';
 @import 'molecules/glider/glider';
-@import 'molecules/timeline-navigation/timeline-navigation';
+@import 'molecules/glider/glider-course';
+@import 'molecules/glider/glider-hero';
 
 // Organisms
 @import 'organisms/header/header';
 @import 'organisms/footer/footer';
 @import 'organisms/mega-menu/mega-menu';
 @import 'organisms/hero/hero';
+@import 'organisms/hero/hero--dynamic-headline';
 @import 'organisms/sections/sections';
 @import 'organisms/accordion/accordion';
 @import 'organisms/domain-search/domain-search';

package/src/assets/js/anchorScroll.js

@@ -0,0 +1,10 @@
+import SmoothScroll from 'smooth-scroll';
+
+const anchorScroll = new SmoothScroll('a[href*="#"]', {
+	speed: 1500,
+	speedAsDuration: true,
+	easing: 'easeOutCubic',
+	ignore: '[data-scroll-ignore]',
+});
+
+module.exports = anchorScroll;

package/src/assets/js/objToQuery.js

@@ -9,11 +9,11 @@ const objToQuery = (obj, exclude = [], parent = null) => {
 		const queryKey = (parent) ? `${parent}[${key}]` : key;
 
 		if (Array.isArray(value)) {
-			value.forEach((subValue) => query.push(`${queryKey}[]=${subValue}`));
+			value.forEach((subValue) => query.push(`${queryKey}[]=${encodeURIComponent(subValue)}`));
 		} else if (typeof value === 'object') {
 			query.push(objToQuery(value, exclude, queryKey));
 		} else {
-			query.push(`${queryKey}=${value}`);
+			query.push(`${queryKey}=${encodeURIComponent(value)}`);
 		}
 	});
 

package/src/assets/js/offset.js

@@ -0,0 +1,22 @@
+module.exports = {
+	// Get top of element relative to window
+	offsetTop(el) {
+		const rect = el.getBoundingClientRect();
+		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+		return rect.top + scrollTop;
+	},
+
+	// Get bottom of element relative to window
+	offsetBottom(el) {
+		const rect = el.getBoundingClientRect();
+		const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+		return rect.bottom + scrollTop;
+	},
+
+	// Get left of element relative to window
+	offsetLeft(el) {
+		const rect = el.getBoundingClientRect();
+		const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+		return rect.left + scrollLeft;
+	},
+};

package/src/assets/js/parallax.js

@@ -0,0 +1,15 @@
+function isInView(el) {
+	const box = el.getBoundingClientRect();
+	return box.top < window.innerHeight && box.bottom >= 0;
+}
+
+const parallaxes = document.querySelectorAll('.js-parallax');
+
+window.addEventListener('scroll', () => {
+	[].forEach.call(parallaxes, (parallax) => {
+		const visible = isInView(parallax);
+		if (visible) {
+			parallax.classList.add('animate');
+		}
+	});
+});

package/src/assets/js/youtube.js

@@ -7,10 +7,8 @@ function loadYoutubeAPI() {
 	firstScript.parentNode.insertBefore(tag, firstScript);
 }
 
-function onPlayerReady(el, e) {
-	el.addEventListener('click', () => {
-		e.target.playVideo();
-	});
+function onPlayerReady(el) {
+	el.setAttribute('data-youtube-ready', 'true');
 }
 
 function onPlayerStateChange(el, e) {
@@ -30,16 +28,28 @@ function createCover(el, id) {
 }
 
 function setupYoutubePlayer(el) {
-	const playerEl = document.createElement('div');
+	let playerEl;
 	const id = el.getAttribute('data-youtube');
 
+	if (el.youtube) {
+		playerEl = el.querySelector('[data-youtube-container]');
+
+		playerEl.parentNode.removeChild(playerEl);
+		el.youtube.destroy();
+		el.youtube = null;
+		el.removeAttribute('data-youtube-ready');
+	}
+
+	playerEl = document.createElement('div');
+
 	if (!el.getElementsByTagName('img').length) {
 		createCover(el, id);
 	}
 
+	playerEl.setAttribute('data-youtube-container', true);
 	el.appendChild(playerEl);
 
-	const player = new YT.Player(playerEl, {
+	el.youtube = new YT.Player(playerEl, {
 		height: '100%',
 		width: '100%',
 		videoId: id,
@@ -53,18 +63,33 @@ function setupYoutubePlayer(el) {
 			onStateChange: (e) => onPlayerStateChange(el, e),
 		},
 	});
+}
 
-	el.youtube = player;
+function delegateClick(e) {
+	const el = e.target.closest('[data-youtube]');
+
+	if (!el || !el.youtube) {
+		return;
+	}
+
+	el.youtube.playVideo();
 }
 
-window.onYouTubeIframeAPIReady = () => {
-	const players = document.querySelectorAll('[data-youtube]');
+// eslint-disable-next-line import/prefer-default-export
+export function setupPlayers(container) {
+	const players = container.querySelectorAll('[data-youtube]');
 
 	if (!players.length) {
 		return;
 	}
 
 	[].forEach.call(players, setupYoutubePlayer);
+}
+
+window.onYouTubeIframeAPIReady = () => {
+	setupPlayers(document);
+
+	document.body.addEventListener('click', delegateClick);
 };
 
 loadYoutubeAPI();

package/src/assets/video/chapters.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:39.000
+Kapitel 1 / 8: Introduktion
+
+00:00:39.000 --> 00:01:51.500
+Kapitel 2 / 8: Idén om internet
+
+00:01:51.500 --> 00:02:53.000
+Kapitel 3 / 8: Arpanet blir till
+
+00:02:53.000 --> 00:03:27.000
+Kapitel 4 / 8: TCP/IP uppfinns
+
+00:03:27.000 --> 00:03:56.500
+Kapitel 5 / 8: Sveriges första internetnod
+
+00:03:56.500 --> 00:04:34.000
+Kapitel 6 / 8: Toppdomänen .se registreras
+
+00:04:34.000 --> 00:05:17.000
+Kapitel 7 / 8: World Wide Web
+
+00:05:17.000 --> 00:06:28.000
+Kapitel 8 / 8: Mosaic - den grafiska webbläsaren

package/src/assets/video/metadata.vtt

@@ -0,0 +1,28 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:25.000
+6513
+
+00:00:25.000 --> 00:00:39.000
+5555
+
+00:00:39.000 --> 00:01:51.500
+1376
+
+00:01:51.500 --> 00:02:23.000
+666
+
+00:02:23.000 --> 00:03:27.000
+777
+
+00:03:27.000 --> 00:03:56.500
+888
+
+00:03:56.500 --> 00:04:34.000
+242
+
+00:04:34.000 --> 00:05:17.000
+1337
+
+00:05:17.000 --> 00:06:28.000
+1177

package/src/assets/video/videoplayer.vtt

@@ -0,0 +1,25 @@
+WEBVTT
+
+1
+00:00:00.500 --> 00:00:02.000
+Lorem ipsum dolor sit amet, consectetur adipiscing elit
+
+2
+00:00:02.100 --> 00:00:03.000
+Phasellus eget lorem dui
+
+3
+00:00:03.100 --> 00:00:04.500
+Morbi ac nisi ac purus maximus semper a vitae diam fusce sit amet libero non tortor
+
+4
+00:00:04.600 --> 00:00:05.500
+Ut scelerisque sagittis justo vitae viverra
+
+5
+00:00:05.600 --> 00:00:06.500
+unc blandit justo sed odio tempus ultrices. Pellentesque sollicitudin justo.
+
+6
+00:00:06.100 --> 00:00:08.000
+Etiam ut volutpat tortor. Nunc iaculis luctus sapien.

package/src/atoms/button/_button.scss

@@ -64,7 +64,6 @@
 
 	@include e(text) {
 		position: relative;
-		top: -#{rhythm(0.2)};
 		transform: translateY(0);
 		transition: 0.3s opacity, 0.3s transform;
 		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -172,8 +171,8 @@
 
 		@include e(icon) {
 			position: static;
-			width: $icon-size-medium;
-			height: $icon-size-medium;
+			width: $icon-size;
+			height: $icon-size;
 			transform: none;
 			fill: $color-cyberspace;
 		}
@@ -246,22 +245,20 @@
 		}
 	}
 
-	@include m(sandstone) {
-		color: $color-sandstone;
+	@include m(snow) {
+		color: transparent;
 
 		&:hover,
 		&:focus {
-			color: darken($color-sandstone, 12%);
-			text-shadow: none;
+			color: $color-snow;
 		}
 
 		@include e(text) {
 			color: $color-snow;
-			text-shadow: 0 0 rhythm(2) $color-sandstone-dark;
 		}
 
 		@include e(icon) {
-			fill: $color-cyberspace;
+			fill: $color-snow;
 		}
 	}
 

package/src/atoms/icon/spinner-white.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-spinner-white" viewbox="0 0 100 100" class="spinner" width="100" height="100">
-	<g>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="none" stroke-width="7"></circle>
-		<circle cx="50" cy="50" fill="none" r="43" stroke="#fff" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)">
-			<animatetransform attributename="transform" type="rotate" calcmode="linear" values="0 50 50;180 50 50;720 50 50" keytimes="0;0.5;1" dur="2.5s" begin="0s" repeatcount="indefinite"></animatetransform>
-			<animate attributename="stroke-dasharray" calcmode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keytimes="0;0.5;1" dur="2.5" begin="0s" repeatcount="indefinite"></animate>
-		</circle>
-	</g>
-</svg>
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.base}}" ng-attr-stroke-width="{{config.width}}" fill="none" r="43" stroke="transparent" stroke-width="7"></circle><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-width="{{config.innerWidth}}" ng-attr-stroke-linecap="{{config.linecap}}" fill="none" r="43" stroke="#ffffff" stroke-width="7" stroke-linecap="square" transform="rotate(27.6965 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;180 50 50;720 50 50" keyTimes="0;0.5;1" dur="2.5s" begin="0s" repeatCount="indefinite"></animateTransform><animate attributeName="stroke-dasharray" calcMode="linear" values="9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182" keyTimes="0;0.5;1" dur="2.5" begin="0s" repeatCount="indefinite"></animate></circle></svg>