onload = init; function init() { // import {Spinner} from 'spin.js'; var opts1 = { lines: 13, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle scale: 1, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) speed: 1, // Rounds per second rotate: 0, // The rotation offset animation: 'spinner-line-fade-more', direction: 1, // 1: clockwise, -1: counterclockwise color: '#555555', // CSS color or array of colors fadeColor: 'transparent', // CSS color or array of colors top: '25%', // Top position relative to parent left: '25%', // Left position relative to parent shadow: '0 0 1px transparent', // Box-shadow for the lines zIndex: 2000000000, // The z-index (defaults to 2e9) className: 'spinner', // The CSS class to assign to the spinner position: 'absolute', // Element positioning }; var target1 = document.getElementById('foo1'); var spinner1 = new Spinner(opts1).spin(target1); var opts2 = { lines: 13, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle scale: 1, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) speed: 1, // Rounds per second rotate: 0, // The rotation offset animation: 'spinner-line-fade-quick', direction: 1, // 1: clockwise, -1: counterclockwise color: '#555555', // CSS color or array of colors fadeColor: 'transparent', // CSS color or array of colors top: '25%', // Top position relative to parent left: '75%', // Left position relative to parent shadow: '0 0 1px transparent', // Box-shadow for the lines zIndex: 2000000000, // The z-index (defaults to 2e9) className: 'spinner', // The CSS class to assign to the spinner position: 'absolute', // Element positioning }; var target2 = document.getElementById('foo2'); var spinner2 = new Spinner(opts2).spin(target2); var opts3 = { lines: 13, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle scale: 1, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) speed: 1, // Rounds per second rotate: 0, // The rotation offset // animation: 'spinner-line-fade-quick', // The CSS animation name for the lines animation: 'spinner-line-fade-default', direction: 1, // 1: clockwise, -1: counterclockwise color: '#555555', // CSS color or array of colors fadeColor: 'transparent', // CSS color or array of colors top: '75%', // Top position relative to parent left: '25%', // Left position relative to parent shadow: '0 0 1px transparent', // Box-shadow for the lines zIndex: 2000000000, // The z-index (defaults to 2e9) className: 'spinner', // The CSS class to assign to the spinner position: 'absolute', // Element positioning }; var target3 = document.getElementById('foo3'); var spinner3 = new Spinner(opts3).spin(target3); var opts4 = { lines: 13, // The number of lines to draw length: 20, // The length of each line width: 10, // The line thickness radius: 30, // The radius of the inner circle scale: 1, // Scales overall size of the spinner corners: 1, // Corner roundness (0..1) speed: 1, // Rounds per second rotate: 0, // The rotation offset // animation: 'spinner-line-fade-quick', // The CSS animation name for the lines animation: 'spinner-line-shrink', direction: 1, // 1: clockwise, -1: counterclockwise color: '#555555', // CSS color or array of colors fadeColor: 'transparent', // CSS color or array of colors top: '75%', // Top position relative to parent left: '75%', // Left position relative to parent shadow: '0 0 1px transparent', // Box-shadow for the lines zIndex: 2000000000, // The z-index (defaults to 2e9) className: 'spinner', // The CSS class to assign to the spinner position: 'absolute', // Element positioning }; var target4 = document.getElementById('foo4'); var spinner4 = new Spinner(opts4).spin(target4); setTimeout(function() { spinner1.stop(); target1.innerHTML = '

Page loaded

'; spinner2.stop(); target2.innerHTML = '

Page loaded

'; spinner3.stop(); target3.innerHTML = '

Page loaded

'; spinner4.stop(); target4.innerHTML = '

Page loaded

'; }, 10000); } ////////////////////////////////////////////////////////////////////////////// // below is code of spin.js library for Code Playground used // modified form https://cdnjs.cloudflare.com/ajax/libs/spin.js/4.1.0/spin.js var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var defaults = { lines: 12, length: 7, width: 5, radius: 10, scale: 1.0, corners: 1, color: '#000', fadeColor: 'transparent', animation: 'spinner-line-fade-default', rotate: 0, direction: 1, speed: 1, zIndex: 2e9, className: 'spinner', top: '50%', left: '50%', shadow: '0 0 1px transparent', position: 'absolute', }; var Spinner = /** @class */ (function () { function Spinner(opts) { if (opts === void 0) { opts = {}; } this.opts = __assign(__assign({}, defaults), opts); } /** * Adds the spinner to the given target element. If this instance is already * spinning, it is automatically removed from its previous target by calling * stop() internally. */ Spinner.prototype.spin = function (target) { this.stop(); this.el = document.createElement('div'); this.el.className = this.opts.className; this.el.setAttribute('role', 'progressbar'); css(this.el, { position: this.opts.position, width: 0, zIndex: this.opts.zIndex, left: this.opts.left, top: this.opts.top, transform: "scale(" + this.opts.scale + ")", }); if (target) { target.insertBefore(this.el, target.firstChild || null); } drawLines(this.el, this.opts); return this; }; /** * Stops and removes the Spinner. * Stopped spinners may be reused by calling spin() again. */ Spinner.prototype.stop = function () { if (this.el) { if (typeof requestAnimationFrame !== 'undefined') { cancelAnimationFrame(this.animateId); } else { clearTimeout(this.animateId); } if (this.el.parentNode) { this.el.parentNode.removeChild(this.el); } this.el = undefined; } return this; }; return Spinner; }()); // export { Spinner }; /** * Sets multiple style properties at once. */ function css(el, props) { for (var prop in props) { el.style[prop] = props[prop]; } return el; } /** * Returns the line color from the given string or array. */ function getColor(color, idx) { return typeof color == 'string' ? color : color[idx % color.length]; } /** * Internal method that draws the individual lines. */ function drawLines(el, opts) { var borderRadius = (Math.round(opts.corners * opts.width * 500) / 1000) + 'px'; var shadow = 'none'; if (opts.shadow === true) { shadow = '0 2px 4px #000'; // default shadow } else if (typeof opts.shadow === 'string') { shadow = opts.shadow; } var shadows = parseBoxShadow(shadow); for (var i = 0; i < opts.lines; i++) { var degrees = ~~(360 / opts.lines * i + opts.rotate); var backgroundLine = css(document.createElement('div'), { position: 'absolute', top: -opts.width / 2 + "px", width: (opts.length + opts.width) + 'px', height: opts.width + 'px', background: getColor(opts.fadeColor, i), borderRadius: borderRadius, transformOrigin: 'left', transform: "rotate(" + degrees + "deg) translateX(" + opts.radius + "px)", }); var delay = i * opts.direction / opts.lines / opts.speed; delay -= 1 / opts.speed; // so initial animation state will include trail var line = css(document.createElement('div'), { width: '100%', height: '100%', background: getColor(opts.color, i), borderRadius: borderRadius, boxShadow: normalizeShadow(shadows, degrees), animation: 1 / opts.speed + "s linear " + delay + "s infinite " + opts.animation, }); backgroundLine.appendChild(line); el.appendChild(backgroundLine); } } function parseBoxShadow(boxShadow) { var regex = /^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/; var shadows = []; for (var _i = 0, _a = boxShadow.split(','); _i < _a.length; _i++) { var shadow = _a[_i]; var matches = shadow.match(regex); if (matches === null) { continue; // invalid syntax } var x = +matches[2]; var y = +matches[5]; var xUnits = matches[4]; var yUnits = matches[7]; if (x === 0 && !xUnits) { xUnits = yUnits; } if (y === 0 && !yUnits) { yUnits = xUnits; } if (xUnits !== yUnits) { continue; // units must match to use as coordinates } shadows.push({ prefix: matches[1] || '', x: x, y: y, xUnits: xUnits, yUnits: yUnits, end: matches[8], }); } return shadows; } /** * Modify box-shadow x/y offsets to counteract rotation */ function normalizeShadow(shadows, degrees) { var normalized = []; for (var _i = 0, shadows_1 = shadows; _i < shadows_1.length; _i++) { var shadow = shadows_1[_i]; var xy = convertOffset(shadow.x, shadow.y, degrees); normalized.push(shadow.prefix + xy[0] + shadow.xUnits + ' ' + xy[1] + shadow.yUnits + shadow.end); } return normalized.join(', '); } function convertOffset(x, y, degrees) { var radians = degrees * Math.PI / 180; var sin = Math.sin(radians); var cos = Math.cos(radians); return [ Math.round((x * cos + y * sin) * 1000) / 1000, Math.round((-x * sin + y * cos) * 1000) / 1000, ]; }

spin.js loader