Vivid CSS3 Spinner

Developer
Kevin Jannis
Size
3,181 Kb
Views
24,288
  1. Vivid CSS3 Spinner Previews
  2. Vivid CSS3 Spinner HTML Codes
  3. Vivid CSS3 Spinner CSS Codes
  4. Vivid CSS3 Spinner JS Codes

How do I make an vivid css3 spinner?

What is a vivid css3 spinner? How do you make a vivid css3 spinner? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.

Vivid CSS3 Spinner Previews
IQ Test

Vivid CSS3 Spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vivid CSS3 Spinner</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> <section class="wrapper"> <div class="spinner"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div>
</section>
<section class="wrapper dark"> <div class="spinner"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

Vivid CSS3 Spinner - Script Codes CSS Codes

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
section.wrapper { padding: 40px 0;
}
section.wrapper.dark { background: #313134;
}
div.spinner { -moz-animation: rotate 10s infinite linear; -webkit-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear; position: relative; display: block; margin: auto; width: 142px; height: 142px;
}
div.spinner i { -moz-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03); -webkit-animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03); animation: rotate 3s infinite cubic-bezier(0.09, 0.6, 0.8, 0.03); -moz-transform-origin: 50% 100% 0; -webkit-transform-origin: 50% 100% 0; transform-origin: 50% 100% 0; position: absolute; display: inline-block; top: 50%; left: 50%; border: solid 6px transparent; border-bottom: none;
}
div.spinner i:nth-child(1) { -moz-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03); animation-timing-function: cubic-bezier(0.09, 0.3, 0.12, 0.03); width: 44px; height: 22px; margin-top: -22px; margin-left: -22px; border-color: #2172b8; border-top-left-radius: 36px; border-top-right-radius: 36px;
}
div.spinner i:nth-child(2) { -moz-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03); animation-timing-function: cubic-bezier(0.09, 0.6, 0.24, 0.03); width: 58px; height: 29px; margin-top: -29px; margin-left: -29px; border-color: #18a39b; border-top-left-radius: 42px; border-top-right-radius: 42px;
}
div.spinner i:nth-child(3) { -moz-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03); animation-timing-function: cubic-bezier(0.09, 0.9, 0.36, 0.03); width: 72px; height: 36px; margin-top: -36px; margin-left: -36px; border-color: #82c545; border-top-left-radius: 48px; border-top-right-radius: 48px;
}
div.spinner i:nth-child(4) { -moz-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03); animation-timing-function: cubic-bezier(0.09, 1.2, 0.48, 0.03); width: 86px; height: 43px; margin-top: -43px; margin-left: -43px; border-color: #f8b739; border-top-left-radius: 54px; border-top-right-radius: 54px;
}
div.spinner i:nth-child(5) { -moz-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03); animation-timing-function: cubic-bezier(0.09, 1.5, 0.6, 0.03); width: 100px; height: 50px; margin-top: -50px; margin-left: -50px; border-color: #f06045; border-top-left-radius: 60px; border-top-right-radius: 60px;
}
div.spinner i:nth-child(6) { -moz-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03); animation-timing-function: cubic-bezier(0.09, 1.8, 0.72, 0.03); width: 114px; height: 57px; margin-top: -57px; margin-left: -57px; border-color: #ed2861; border-top-left-radius: 66px; border-top-right-radius: 66px;
}
div.spinner i:nth-child(7) { -moz-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03); animation-timing-function: cubic-bezier(0.09, 2.1, 0.84, 0.03); width: 128px; height: 64px; margin-top: -64px; margin-left: -64px; border-color: #c12680; border-top-left-radius: 72px; border-top-right-radius: 72px;
}
div.spinner i:nth-child(8) { -moz-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03); -webkit-animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03); animation-timing-function: cubic-bezier(0.09, 2.4, 0.96, 0.03); width: 142px; height: 71px; margin-top: -71px; margin-left: -71px; border-color: #5d3191; border-top-left-radius: 78px; border-top-right-radius: 78px;
}
@-moz-keyframes rotate { to { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes rotate { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

Vivid CSS3 Spinner - Script Codes JS Codes

/*
Vivid CSS3 Spinner
Made by Kevin Jannis (@kevinjannis)
Inspired by http://gif.flrn.nl/post/111106392227
View more at www.janniskev.in
*/
Vivid CSS3 Spinner - Script Codes
Vivid CSS3 Spinner - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 25, 2022
Rating 4.5
Size 3,181 Kb
Views 24,288
Do you need developer help for Vivid CSS3 Spinner?

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!

Kevin Jannis (kevinjannis) Script Codes
Name
White House
Google Chrome logos in CSS
Flat Star Wars
Random Access Memories
A winter wonderland scene
Simple float label
V for Vendetta
Golfing
A Pen by Kevin Jannis
Vintage TV
Create amazing art & images 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!