A Pen by Robert Lowe

Developer

Size

4,312 Kb

Views

40,480

A Pen by Robert Lowe Previews
A Pen by Robert Lowe HTML Codes
A Pen by Robert Lowe CSS Codes
A Pen by Robert Lowe JS Codes

How do I make an a pen by robert lowe?

Inspired by this excellent pen: http://codepen.io/_massimo/pen/epbqqV. What is a a pen by robert lowe? How do you make a a pen by robert lowe? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.

A Pen by Robert Lowe Previews

A Pen by Robert Lowe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Robert Lowe</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="angularPageApp" ng-controller="angularPageAppCtrl" class="app-container"> <box ng-repeat="item in list"></box>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Robert Lowe - Script Codes CSS Codes

*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; font-size: 66.5%; background: #8e4ec9; background: -moz-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #8e4ec9), color-stop(67%, #813fbf), color-stop(100%, #7428b7)); background: -webkit-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: -o-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: -ms-linear-gradient(left, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); background: linear-gradient(to right, #8e4ec9 0%, #813fbf 67%, #7428b7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e4ec9', endColorstr='#7428b7', GradientType=1 );
}
@-webkit-keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
@-moz-keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
@-o-keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
@keyframes spin { 0% { -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); border-color: #2D93AD; border-radius: 2em; } 50% { -ms-transform: rotate(-270deg); -webkit-transform: rotate(-270deg); transform: rotate(-270deg); border-color: #DBD56E; border-width: 1em; border-radius: 15em; } 100% { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); border-color: #2D93AD; border-radius: 2em; }
}
.app-container { position: relative; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 95vh; overflow: hidden;
}
.box { font-size: 0.5em; position: absolute; border: 0.1em solid #2D93AD; border-radius: 2em;
}
.box:nth-child(1) { width: 1.2em; height: 1.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.1s; animation-delay: 0.1s;
}
.box:nth-child(2) { width: 2.4em; height: 2.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.box:nth-child(3) { width: 3.6em; height: 3.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
.box:nth-child(4) { width: 4.8em; height: 4.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
.box:nth-child(5) { width: 6em; height: 6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
.box:nth-child(6) { width: 7.2em; height: 7.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
.box:nth-child(7) { width: 8.4em; height: 8.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.7s; animation-delay: 0.7s;
}
.box:nth-child(8) { width: 9.6em; height: 9.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
}
.box:nth-child(9) { width: 10.8em; height: 10.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
.box:nth-child(10) { width: 12em; height: 12em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s;
}
.box:nth-child(11) { width: 13.2em; height: 13.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.1s; animation-delay: 1.1s;
}
.box:nth-child(12) { width: 14.4em; height: 14.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.2s; animation-delay: 1.2s;
}
.box:nth-child(13) { width: 15.6em; height: 15.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.3s; animation-delay: 1.3s;
}
.box:nth-child(14) { width: 16.8em; height: 16.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.4s; animation-delay: 1.4s;
}
.box:nth-child(15) { width: 18em; height: 18em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.box:nth-child(16) { width: 19.2em; height: 19.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.6s; animation-delay: 1.6s;
}
.box:nth-child(17) { width: 20.4em; height: 20.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.7s; animation-delay: 1.7s;
}
.box:nth-child(18) { width: 21.6em; height: 21.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.8s; animation-delay: 1.8s;
}
.box:nth-child(19) { width: 22.8em; height: 22.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 1.9s; animation-delay: 1.9s;
}
.box:nth-child(20) { width: 24em; height: 24em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s;
}
.box:nth-child(21) { width: 25.2em; height: 25.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.1s; animation-delay: 2.1s;
}
.box:nth-child(22) { width: 26.4em; height: 26.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.2s; animation-delay: 2.2s;
}
.box:nth-child(23) { width: 27.6em; height: 27.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.3s; animation-delay: 2.3s;
}
.box:nth-child(24) { width: 28.8em; height: 28.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.4s; animation-delay: 2.4s;
}
.box:nth-child(25) { width: 30em; height: 30em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}
.box:nth-child(26) { width: 31.2em; height: 31.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.6s; animation-delay: 2.6s;
}
.box:nth-child(27) { width: 32.4em; height: 32.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.7s; animation-delay: 2.7s;
}
.box:nth-child(28) { width: 33.6em; height: 33.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.8s; animation-delay: 2.8s;
}
.box:nth-child(29) { width: 34.8em; height: 34.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 2.9s; animation-delay: 2.9s;
}
.box:nth-child(30) { width: 36em; height: 36em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3s; animation-delay: 3s;
}
.box:nth-child(31) { width: 37.2em; height: 37.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.1s; animation-delay: 3.1s;
}
.box:nth-child(32) { width: 38.4em; height: 38.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.2s; animation-delay: 3.2s;
}
.box:nth-child(33) { width: 39.6em; height: 39.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.3s; animation-delay: 3.3s;
}
.box:nth-child(34) { width: 40.8em; height: 40.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.4s; animation-delay: 3.4s;
}
.box:nth-child(35) { width: 42em; height: 42em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.5s; animation-delay: 3.5s;
}
.box:nth-child(36) { width: 43.2em; height: 43.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.6s; animation-delay: 3.6s;
}
.box:nth-child(37) { width: 44.4em; height: 44.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.7s; animation-delay: 3.7s;
}
.box:nth-child(38) { width: 45.6em; height: 45.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.8s; animation-delay: 3.8s;
}
.box:nth-child(39) { width: 46.8em; height: 46.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 3.9s; animation-delay: 3.9s;
}
.box:nth-child(40) { width: 48em; height: 48em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4s; animation-delay: 4s;
}
.box:nth-child(41) { width: 49.2em; height: 49.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.1s; animation-delay: 4.1s;
}
.box:nth-child(42) { width: 50.4em; height: 50.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.2s; animation-delay: 4.2s;
}
.box:nth-child(43) { width: 51.6em; height: 51.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.3s; animation-delay: 4.3s;
}
.box:nth-child(44) { width: 52.8em; height: 52.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.4s; animation-delay: 4.4s;
}
.box:nth-child(45) { width: 54em; height: 54em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.5s; animation-delay: 4.5s;
}
.box:nth-child(46) { width: 55.2em; height: 55.2em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.6s; animation-delay: 4.6s;
}
.box:nth-child(47) { width: 56.4em; height: 56.4em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.7s; animation-delay: 4.7s;
}
.box:nth-child(48) { width: 57.6em; height: 57.6em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.8s; animation-delay: 4.8s;
}
.box:nth-child(49) { width: 58.8em; height: 58.8em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 4.9s; animation-delay: 4.9s;
}
.box:nth-child(50) { width: 60em; height: 60em; -webkit-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation: spin 5s linear infinite; animation: spin 5s linear infinite; -webkit-animation-delay: 5s; animation-delay: 5s;
}

A Pen by Robert Lowe - Script Codes JS Codes

(function() { angular.module('angularPageApp', ['ngSanitize']) .controller('angularPageAppCtrl', function($scope) { $scope.list = []; for(var i = 0; i < 50; i++) { $scope.list.push({}); } }) .directive('box', function() { return { restrict: 'E', replace: true, controller: function($scope) {}, template: '<div class="box"></div>' }; });
}());

Home Page	Home
Developer	Robert Lowe
Username	rlo206
Uploaded	July 23, 2022
Rating	3.5
Size	4,312 Kb
Views	40,480

Do you need developer help for A Pen by Robert Lowe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Lowe (rlo206) Script Codes

Name	Size
Animated slider in pure angular	5,111 Kb
Windows 10 toggle button directive	4,256 Kb
Interactive data table with Angular and SCSS	9,618 Kb
Semantic Element Document Outline	3,153 Kb
Draggables in pure angular	5,167 Kb
Customizable ripples with angular	4,825 Kb
Google Mic Icon	3,388 Kb
Learning to style range inputs	4,175 Kb
Testing Semantic UI Grid	2,832 Kb
Editable Table Concept	7,026 Kb

Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Gradients	Karpovsystems	2,394 Kb
Mandelbrot Fractal	_Billy_Brown	2,706 Kb
Blog demo to use given styling	Andygirl	2,412 Kb
A Pen by Matt Popovich	Mpopv	3,349 Kb
Clock Face Idea	Chrisburnell	3,196 Kb
VerbalExpressions Converter	Cmalven	2,607 Kb
Materializecss input form	Jasonchan	1,443 Kb
TweenMax transformOrigin Bubble	Nicolund	2,209 Kb
CSS3 Snow Animation	NickyCDK	1,695 Kb
Acorrdian 2016	Milanodituti	3,720 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!