Colorful Animated Border

Developer

Size

3,351 Kb

Views

4,048

Colorful Animated Border Previews
Colorful Animated Border HTML Codes
Colorful Animated Border CSS Codes

How do I make an colorful animated border?

Proooobably not good to actually use as a border. Better suited to use far fewer divs, drop the timing and steps down, and use it as a loader. Just sayin... :). What is a colorful animated border? How do you make a colorful animated border? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.

Colorful Animated Border Previews

Colorful Animated Border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Colorful Animated Border</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Colorful Animated Border - Script Codes CSS Codes

html { background-color: #2e2e2e;
}
body { position: fixed; top: 50%; left: 50%; height: 1px; width: 1px; margin-left: -75px; margin-top: -75px;
}
/* Border */
/* Uncomment for Loader */
@-webkit-keyframes ringaround { 0% { top: 0px; left: 0px; background-color: yellow; } 25% { top: 150px; left: 0px; background-color: red; } 50% { top: 150px; left: 150px; background-color: blue; } 75% { top: 0px; left: 150px; background-color: green; } 100% { top: 0px; left: 0px; background-color: yellow; }
}
@keyframes ringaround { 0% { top: 0px; left: 0px; background-color: yellow; } 25% { top: 150px; left: 0px; background-color: red; } 50% { top: 150px; left: 150px; background-color: blue; } 75% { top: 0px; left: 150px; background-color: green; } 100% { top: 0px; left: 0px; background-color: yellow; }
}
div { position: absolute; height: 2px; width: 2px; margin-top: -1px; margin-left: -1px; border-radius: 100%;
}
div:nth-child(1) { -webkit-animation: ringaround -1s 100s steps(30) infinite; animation: ringaround -1s 100s steps(30) infinite;
}
div:nth-child(2) { -webkit-animation: ringaround -2s 100s steps(30) infinite; animation: ringaround -2s 100s steps(30) infinite;
}
div:nth-child(3) { -webkit-animation: ringaround -3s 100s steps(30) infinite; animation: ringaround -3s 100s steps(30) infinite;
}
div:nth-child(4) { -webkit-animation: ringaround -4s 100s steps(30) infinite; animation: ringaround -4s 100s steps(30) infinite;
}
div:nth-child(5) { -webkit-animation: ringaround -5s 100s steps(30) infinite; animation: ringaround -5s 100s steps(30) infinite;
}
div:nth-child(6) { -webkit-animation: ringaround -6s 100s steps(30) infinite; animation: ringaround -6s 100s steps(30) infinite;
}
div:nth-child(7) { -webkit-animation: ringaround -7s 100s steps(30) infinite; animation: ringaround -7s 100s steps(30) infinite;
}
div:nth-child(8) { -webkit-animation: ringaround -8s 100s steps(30) infinite; animation: ringaround -8s 100s steps(30) infinite;
}
div:nth-child(9) { -webkit-animation: ringaround -9s 100s steps(30) infinite; animation: ringaround -9s 100s steps(30) infinite;
}
div:nth-child(10) { -webkit-animation: ringaround -10s 100s steps(30) infinite; animation: ringaround -10s 100s steps(30) infinite;
}
div:nth-child(11) { -webkit-animation: ringaround -11s 100s steps(30) infinite; animation: ringaround -11s 100s steps(30) infinite;
}
div:nth-child(12) { -webkit-animation: ringaround -12s 100s steps(30) infinite; animation: ringaround -12s 100s steps(30) infinite;
}
div:nth-child(13) { -webkit-animation: ringaround -13s 100s steps(30) infinite; animation: ringaround -13s 100s steps(30) infinite;
}
div:nth-child(14) { -webkit-animation: ringaround -14s 100s steps(30) infinite; animation: ringaround -14s 100s steps(30) infinite;
}
div:nth-child(15) { -webkit-animation: ringaround -15s 100s steps(30) infinite; animation: ringaround -15s 100s steps(30) infinite;
}
div:nth-child(16) { -webkit-animation: ringaround -16s 100s steps(30) infinite; animation: ringaround -16s 100s steps(30) infinite;
}
div:nth-child(17) { -webkit-animation: ringaround -17s 100s steps(30) infinite; animation: ringaround -17s 100s steps(30) infinite;
}
div:nth-child(18) { -webkit-animation: ringaround -18s 100s steps(30) infinite; animation: ringaround -18s 100s steps(30) infinite;
}
div:nth-child(19) { -webkit-animation: ringaround -19s 100s steps(30) infinite; animation: ringaround -19s 100s steps(30) infinite;
}
div:nth-child(20) { -webkit-animation: ringaround -20s 100s steps(30) infinite; animation: ringaround -20s 100s steps(30) infinite;
}
div:nth-child(21) { -webkit-animation: ringaround -21s 100s steps(30) infinite; animation: ringaround -21s 100s steps(30) infinite;
}
div:nth-child(22) { -webkit-animation: ringaround -22s 100s steps(30) infinite; animation: ringaround -22s 100s steps(30) infinite;
}
div:nth-child(23) { -webkit-animation: ringaround -23s 100s steps(30) infinite; animation: ringaround -23s 100s steps(30) infinite;
}
div:nth-child(24) { -webkit-animation: ringaround -24s 100s steps(30) infinite; animation: ringaround -24s 100s steps(30) infinite;
}
div:nth-child(25) { -webkit-animation: ringaround -25s 100s steps(30) infinite; animation: ringaround -25s 100s steps(30) infinite;
}
div:nth-child(26) { -webkit-animation: ringaround -26s 100s steps(30) infinite; animation: ringaround -26s 100s steps(30) infinite;
}
div:nth-child(27) { -webkit-animation: ringaround -27s 100s steps(30) infinite; animation: ringaround -27s 100s steps(30) infinite;
}
div:nth-child(28) { -webkit-animation: ringaround -28s 100s steps(30) infinite; animation: ringaround -28s 100s steps(30) infinite;
}
div:nth-child(29) { -webkit-animation: ringaround -29s 100s steps(30) infinite; animation: ringaround -29s 100s steps(30) infinite;
}
div:nth-child(30) { -webkit-animation: ringaround -30s 100s steps(30) infinite; animation: ringaround -30s 100s steps(30) infinite;
}
div:nth-child(31) { -webkit-animation: ringaround -31s 100s steps(30) infinite; animation: ringaround -31s 100s steps(30) infinite;
}
div:nth-child(32) { -webkit-animation: ringaround -32s 100s steps(30) infinite; animation: ringaround -32s 100s steps(30) infinite;
}
div:nth-child(33) { -webkit-animation: ringaround -33s 100s steps(30) infinite; animation: ringaround -33s 100s steps(30) infinite;
}
div:nth-child(34) { -webkit-animation: ringaround -34s 100s steps(30) infinite; animation: ringaround -34s 100s steps(30) infinite;
}
div:nth-child(35) { -webkit-animation: ringaround -35s 100s steps(30) infinite; animation: ringaround -35s 100s steps(30) infinite;
}
div:nth-child(36) { -webkit-animation: ringaround -36s 100s steps(30) infinite; animation: ringaround -36s 100s steps(30) infinite;
}
div:nth-child(37) { -webkit-animation: ringaround -37s 100s steps(30) infinite; animation: ringaround -37s 100s steps(30) infinite;
}
div:nth-child(38) { -webkit-animation: ringaround -38s 100s steps(30) infinite; animation: ringaround -38s 100s steps(30) infinite;
}
div:nth-child(39) { -webkit-animation: ringaround -39s 100s steps(30) infinite; animation: ringaround -39s 100s steps(30) infinite;
}
div:nth-child(40) { -webkit-animation: ringaround -40s 100s steps(30) infinite; animation: ringaround -40s 100s steps(30) infinite;
}
div:nth-child(41) { -webkit-animation: ringaround -41s 100s steps(30) infinite; animation: ringaround -41s 100s steps(30) infinite;
}
div:nth-child(42) { -webkit-animation: ringaround -42s 100s steps(30) infinite; animation: ringaround -42s 100s steps(30) infinite;
}
div:nth-child(43) { -webkit-animation: ringaround -43s 100s steps(30) infinite; animation: ringaround -43s 100s steps(30) infinite;
}
div:nth-child(44) { -webkit-animation: ringaround -44s 100s steps(30) infinite; animation: ringaround -44s 100s steps(30) infinite;
}
div:nth-child(45) { -webkit-animation: ringaround -45s 100s steps(30) infinite; animation: ringaround -45s 100s steps(30) infinite;
}
div:nth-child(46) { -webkit-animation: ringaround -46s 100s steps(30) infinite; animation: ringaround -46s 100s steps(30) infinite;
}
div:nth-child(47) { -webkit-animation: ringaround -47s 100s steps(30) infinite; animation: ringaround -47s 100s steps(30) infinite;
}
div:nth-child(48) { -webkit-animation: ringaround -48s 100s steps(30) infinite; animation: ringaround -48s 100s steps(30) infinite;
}
div:nth-child(49) { -webkit-animation: ringaround -49s 100s steps(30) infinite; animation: ringaround -49s 100s steps(30) infinite;
}
div:nth-child(50) { -webkit-animation: ringaround -50s 100s steps(30) infinite; animation: ringaround -50s 100s steps(30) infinite;
}
div:nth-child(51) { -webkit-animation: ringaround -51s 100s steps(30) infinite; animation: ringaround -51s 100s steps(30) infinite;
}
div:nth-child(52) { -webkit-animation: ringaround -52s 100s steps(30) infinite; animation: ringaround -52s 100s steps(30) infinite;
}
div:nth-child(53) { -webkit-animation: ringaround -53s 100s steps(30) infinite; animation: ringaround -53s 100s steps(30) infinite;
}
div:nth-child(54) { -webkit-animation: ringaround -54s 100s steps(30) infinite; animation: ringaround -54s 100s steps(30) infinite;
}
div:nth-child(55) { -webkit-animation: ringaround -55s 100s steps(30) infinite; animation: ringaround -55s 100s steps(30) infinite;
}
div:nth-child(56) { -webkit-animation: ringaround -56s 100s steps(30) infinite; animation: ringaround -56s 100s steps(30) infinite;
}
div:nth-child(57) { -webkit-animation: ringaround -57s 100s steps(30) infinite; animation: ringaround -57s 100s steps(30) infinite;
}
div:nth-child(58) { -webkit-animation: ringaround -58s 100s steps(30) infinite; animation: ringaround -58s 100s steps(30) infinite;
}
div:nth-child(59) { -webkit-animation: ringaround -59s 100s steps(30) infinite; animation: ringaround -59s 100s steps(30) infinite;
}
div:nth-child(60) { -webkit-animation: ringaround -60s 100s steps(30) infinite; animation: ringaround -60s 100s steps(30) infinite;
}
div:nth-child(61) { -webkit-animation: ringaround -61s 100s steps(30) infinite; animation: ringaround -61s 100s steps(30) infinite;
}
div:nth-child(62) { -webkit-animation: ringaround -62s 100s steps(30) infinite; animation: ringaround -62s 100s steps(30) infinite;
}
div:nth-child(63) { -webkit-animation: ringaround -63s 100s steps(30) infinite; animation: ringaround -63s 100s steps(30) infinite;
}
div:nth-child(64) { -webkit-animation: ringaround -64s 100s steps(30) infinite; animation: ringaround -64s 100s steps(30) infinite;
}
div:nth-child(65) { -webkit-animation: ringaround -65s 100s steps(30) infinite; animation: ringaround -65s 100s steps(30) infinite;
}
div:nth-child(66) { -webkit-animation: ringaround -66s 100s steps(30) infinite; animation: ringaround -66s 100s steps(30) infinite;
}
div:nth-child(67) { -webkit-animation: ringaround -67s 100s steps(30) infinite; animation: ringaround -67s 100s steps(30) infinite;
}
div:nth-child(68) { -webkit-animation: ringaround -68s 100s steps(30) infinite; animation: ringaround -68s 100s steps(30) infinite;
}
div:nth-child(69) { -webkit-animation: ringaround -69s 100s steps(30) infinite; animation: ringaround -69s 100s steps(30) infinite;
}
div:nth-child(70) { -webkit-animation: ringaround -70s 100s steps(30) infinite; animation: ringaround -70s 100s steps(30) infinite;
}
div:nth-child(71) { -webkit-animation: ringaround -71s 100s steps(30) infinite; animation: ringaround -71s 100s steps(30) infinite;
}
div:nth-child(72) { -webkit-animation: ringaround -72s 100s steps(30) infinite; animation: ringaround -72s 100s steps(30) infinite;
}
div:nth-child(73) { -webkit-animation: ringaround -73s 100s steps(30) infinite; animation: ringaround -73s 100s steps(30) infinite;
}
div:nth-child(74) { -webkit-animation: ringaround -74s 100s steps(30) infinite; animation: ringaround -74s 100s steps(30) infinite;
}
div:nth-child(75) { -webkit-animation: ringaround -75s 100s steps(30) infinite; animation: ringaround -75s 100s steps(30) infinite;
}
div:nth-child(76) { -webkit-animation: ringaround -76s 100s steps(30) infinite; animation: ringaround -76s 100s steps(30) infinite;
}
div:nth-child(77) { -webkit-animation: ringaround -77s 100s steps(30) infinite; animation: ringaround -77s 100s steps(30) infinite;
}
div:nth-child(78) { -webkit-animation: ringaround -78s 100s steps(30) infinite; animation: ringaround -78s 100s steps(30) infinite;
}
div:nth-child(79) { -webkit-animation: ringaround -79s 100s steps(30) infinite; animation: ringaround -79s 100s steps(30) infinite;
}
div:nth-child(80) { -webkit-animation: ringaround -80s 100s steps(30) infinite; animation: ringaround -80s 100s steps(30) infinite;
}
div:nth-child(81) { -webkit-animation: ringaround -81s 100s steps(30) infinite; animation: ringaround -81s 100s steps(30) infinite;
}
div:nth-child(82) { -webkit-animation: ringaround -82s 100s steps(30) infinite; animation: ringaround -82s 100s steps(30) infinite;
}
div:nth-child(83) { -webkit-animation: ringaround -83s 100s steps(30) infinite; animation: ringaround -83s 100s steps(30) infinite;
}
div:nth-child(84) { -webkit-animation: ringaround -84s 100s steps(30) infinite; animation: ringaround -84s 100s steps(30) infinite;
}
div:nth-child(85) { -webkit-animation: ringaround -85s 100s steps(30) infinite; animation: ringaround -85s 100s steps(30) infinite;
}
div:nth-child(86) { -webkit-animation: ringaround -86s 100s steps(30) infinite; animation: ringaround -86s 100s steps(30) infinite;
}
div:nth-child(87) { -webkit-animation: ringaround -87s 100s steps(30) infinite; animation: ringaround -87s 100s steps(30) infinite;
}
div:nth-child(88) { -webkit-animation: ringaround -88s 100s steps(30) infinite; animation: ringaround -88s 100s steps(30) infinite;
}
div:nth-child(89) { -webkit-animation: ringaround -89s 100s steps(30) infinite; animation: ringaround -89s 100s steps(30) infinite;
}
div:nth-child(90) { -webkit-animation: ringaround -90s 100s steps(30) infinite; animation: ringaround -90s 100s steps(30) infinite;
}
div:nth-child(91) { -webkit-animation: ringaround -91s 100s steps(30) infinite; animation: ringaround -91s 100s steps(30) infinite;
}
div:nth-child(92) { -webkit-animation: ringaround -92s 100s steps(30) infinite; animation: ringaround -92s 100s steps(30) infinite;
}
div:nth-child(93) { -webkit-animation: ringaround -93s 100s steps(30) infinite; animation: ringaround -93s 100s steps(30) infinite;
}
div:nth-child(94) { -webkit-animation: ringaround -94s 100s steps(30) infinite; animation: ringaround -94s 100s steps(30) infinite;
}
div:nth-child(95) { -webkit-animation: ringaround -95s 100s steps(30) infinite; animation: ringaround -95s 100s steps(30) infinite;
}
div:nth-child(96) { -webkit-animation: ringaround -96s 100s steps(30) infinite; animation: ringaround -96s 100s steps(30) infinite;
}
div:nth-child(97) { -webkit-animation: ringaround -97s 100s steps(30) infinite; animation: ringaround -97s 100s steps(30) infinite;
}
div:nth-child(98) { -webkit-animation: ringaround -98s 100s steps(30) infinite; animation: ringaround -98s 100s steps(30) infinite;
}
div:nth-child(99) { -webkit-animation: ringaround -99s 100s steps(30) infinite; animation: ringaround -99s 100s steps(30) infinite;
}
div:nth-child(100) { -webkit-animation: ringaround -100s 100s steps(30) infinite; animation: ringaround -100s 100s steps(30) infinite;
}

Home Page	Home
Developer	Paul Sullivan
Username	pwsm50
Uploaded	January 26, 2023
Rating	3.5
Size	3,351 Kb
Views	4,048

Do you need developer help for Colorful Animated Border?

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!

Paul Sullivan (pwsm50) Script Codes

Name	Size
Full screen burger menu	3,923 Kb
Get out and vote - Nov. 8th	5,616 Kb
CSS speaker	3,046 Kb
Facebook-like Click-to-grow Like Button	2,607 Kb
Breathing Load Screen	2,198 Kb
Thumbs up toggle	2,516 Kb
A Pen by Paul Sullivan	5,249 Kb
CSS Star Wars	10,583 Kb
CSS Particle Box	67,348 Kb
Flying Bee	3,711 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
Buttons for autumn	Nikazawila	1,795 Kb
Another brick in the wall	Fivera	1,955 Kb
Comment Jquery	SquishyAndroid	2,421 Kb
Social Profiles	Lachlanjc	1,939 Kb
Toolbar	Onsen	5,414 Kb
JQuery AJAX reddit Exercise	Btholt	1,777 Kb
Svg sky	Omodev	7,070 Kb
React Template	Isac	1,241 Kb
C.Rowe Button	Brownerd	2,473 Kb
Swiftype Lower Third	Zumwalt	4,796 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!