SVG Loaders

Developer
Joni Trythall
Size
3,649 Kb
Views
26,312
  1. SVG Loaders Previews
  2. SVG Loaders HTML Codes
  3. SVG Loaders CSS Codes
  4. SVG Loaders JS Codes

How do I make an svg loaders?

Trying out different loader animations for some NowSecure buttons. What is a svg loaders? How do you make a svg loaders? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

SVG Loaders Previews
IQ Test

SVG Loaders - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Loaders</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo"> <!-- Loader 1--> <svg class="loader_1" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="-50 -50 244 265"><title>Loader</title><desc>Lines arranged in a circle</desc><g><path class="line_1" stroke-width="2" stroke="#FFF" fill="#FFF" opacity=".9"d="M72.7 0.6L72.7 0.6C74.8 0.6 76.4 2.4 76.4 4.6L76.4 36.6C76.4 38.8 74.8 40.6 72.7 40.6 70.7 40.6 69.1 38.8 69.1 36.6L69.1 4.6C69.1 2.4 70.7 0.6 72.7 0.6"/><path class="line_2" stroke-width="2" stroke="#FFF" opacity="0.8" fill="#FFF" d="M137.8 40.6C137.1 40.6 136.4 40.8 135.7 41.2L107.5 58.2C105.6 59.4 104.9 62 106 64 106.8 65.3 108.1 66.1 109.6 66.1 110.2 66.1 110.9 65.9 111.6 65.5L139.8 48.5C141.8 47.4 142.4 44.8 141.3 42.7 140.6 41.4 139.2 40.6 137.8 40.6"/><path class="line_3" stroke-width: "2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M109.6 102.5C108.1 102.5 106.8 103.3 106 104.6 104.9 106.7 105.6 109.3 107.5 110.5L135.7 127.4C136.4 127.8 137.1 128 137.8 128 139.2 128 140.6 127.3 141.3 125.9 142.4 123.9 141.8 121.3 139.8 120.1L111.6 103.1C110.9 102.7 110.2 102.5 109.6 102.5"/><path class="line_4" stroke-width="2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M72.7 124.4C70.7 124.4 69.1 126.2 69.1 128.4L69.1 160.4C69.1 162.6 70.7 164.4 72.7 164.4 74.8 164.4 76.4 162.6 76.4 160.4L76.4 128.4C76.4 126.2 74.8 124.4 72.7 124.4"/><path class="line_5" stroke-width="2" stroke="#FFF" opacity="0.4" fill="#FFF" d="M32.3 102.5C31.6 102.5 30.9 102.7 30.3 103.1L2 120.1C0.1 121.3-0.6 123.9 0.5 125.9 1.3 127.3 2.7 128 4.1 128 4.8 128 5.5 127.8 6.1 127.4L34.3 110.5C36.3 109.3 37 106.7 35.8 104.6 35.1 103.3 33.7 102.5 32.3 102.5"/><path class="line_6" stroke-width="2" stroke="#FFF" opacity="0.2" fill="#FFF" d="M4.1 40.6C2.7 40.6 1.3 41.4 0.5 42.7 -0.6 44.8 0.1 47.4 2 48.5L30.3 65.5C30.9 65.9 31.6 66.1 32.3 66.1 33.7 66.1 35.1 65.3 35.8 64 37 62 36.3 59.4 34.3 58.2L6.1 41.2C5.5 40.8 4.8 40.6 4.1 40.6"/></g></svg> <!-- Loader 2 --> <svg class="loader_2" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="-50 -50 244 265"><title>Loader</title><desc>Lines arranged in a circle</desc><g><path class="line_1" stroke-width="2" stroke="#FFF" fill="#FFF" d="M72.7 0.6L72.7 0.6C74.8 0.6 76.4 2.4 76.4 4.6L76.4 36.6C76.4 38.8 74.8 40.6 72.7 40.6 70.7 40.6 69.1 38.8 69.1 36.6L69.1 4.6C69.1 2.4 70.7 0.6 72.7 0.6"/><path class="line_2" stroke-width="2" stroke="#FFF" opacity="0.8" fill="#FFF" d="M137.8 40.6C137.1 40.6 136.4 40.8 135.7 41.2L107.5 58.2C105.6 59.4 104.9 62 106 64 106.8 65.3 108.1 66.1 109.6 66.1 110.2 66.1 110.9 65.9 111.6 65.5L139.8 48.5C141.8 47.4 142.4 44.8 141.3 42.7 140.6 41.4 139.2 40.6 137.8 40.6"/><path class="line_3" stroke-width: "2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M109.6 102.5C108.1 102.5 106.8 103.3 106 104.6 104.9 106.7 105.6 109.3 107.5 110.5L135.7 127.4C136.4 127.8 137.1 128 137.8 128 139.2 128 140.6 127.3 141.3 125.9 142.4 123.9 141.8 121.3 139.8 120.1L111.6 103.1C110.9 102.7 110.2 102.5 109.6 102.5"/><path class="line_4" stroke-width="2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M72.7 124.4C70.7 124.4 69.1 126.2 69.1 128.4L69.1 160.4C69.1 162.6 70.7 164.4 72.7 164.4 74.8 164.4 76.4 162.6 76.4 160.4L76.4 128.4C76.4 126.2 74.8 124.4 72.7 124.4"/><path class="line_5" stroke-width="2" stroke="#FFF" opacity="0.4" fill="#FFF" d="M32.3 102.5C31.6 102.5 30.9 102.7 30.3 103.1L2 120.1C0.1 121.3-0.6 123.9 0.5 125.9 1.3 127.3 2.7 128 4.1 128 4.8 128 5.5 127.8 6.1 127.4L34.3 110.5C36.3 109.3 37 106.7 35.8 104.6 35.1 103.3 33.7 102.5 32.3 102.5"/><path class="line_6" stroke-width="2" stroke="#FFF" opacity="0.2" fill="#FFF" d="M4.1 40.6C2.7 40.6 1.3 41.4 0.5 42.7 -0.6 44.8 0.1 47.4 2 48.5L30.3 65.5C30.9 65.9 31.6 66.1 32.3 66.1 33.7 66.1 35.1 65.3 35.8 64 37 62 36.3 59.4 34.3 58.2L6.1 41.2C5.5 40.8 4.8 40.6 4.1 40.6"/></g></svg> <!-- Loader 3 --> <svg class="loader_3" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="-50 -50 244 265"><title>Loader</title><desc>Lines arranged in a circle</desc><g><path class="line_1" stroke-width="2" stroke="#FFF" fill="#FFF" d="M72.7 0.6L72.7 0.6C74.8 0.6 76.4 2.4 76.4 4.6L76.4 36.6C76.4 38.8 74.8 40.6 72.7 40.6 70.7 40.6 69.1 38.8 69.1 36.6L69.1 4.6C69.1 2.4 70.7 0.6 72.7 0.6"/><path class="line_2" stroke-width="2" stroke="#FFF" opacity="0.8" fill="#FFF" d="M137.8 40.6C137.1 40.6 136.4 40.8 135.7 41.2L107.5 58.2C105.6 59.4 104.9 62 106 64 106.8 65.3 108.1 66.1 109.6 66.1 110.2 66.1 110.9 65.9 111.6 65.5L139.8 48.5C141.8 47.4 142.4 44.8 141.3 42.7 140.6 41.4 139.2 40.6 137.8 40.6"/><path class="line_3" stroke-width: "2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M109.6 102.5C108.1 102.5 106.8 103.3 106 104.6 104.9 106.7 105.6 109.3 107.5 110.5L135.7 127.4C136.4 127.8 137.1 128 137.8 128 139.2 128 140.6 127.3 141.3 125.9 142.4 123.9 141.8 121.3 139.8 120.1L111.6 103.1C110.9 102.7 110.2 102.5 109.6 102.5"/><path class="line_4" stroke-width="2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M72.7 124.4C70.7 124.4 69.1 126.2 69.1 128.4L69.1 160.4C69.1 162.6 70.7 164.4 72.7 164.4 74.8 164.4 76.4 162.6 76.4 160.4L76.4 128.4C76.4 126.2 74.8 124.4 72.7 124.4"/><path class="line_5" stroke-width="2" stroke="#FFF" opacity="0.4" fill="#FFF" d="M32.3 102.5C31.6 102.5 30.9 102.7 30.3 103.1L2 120.1C0.1 121.3-0.6 123.9 0.5 125.9 1.3 127.3 2.7 128 4.1 128 4.8 128 5.5 127.8 6.1 127.4L34.3 110.5C36.3 109.3 37 106.7 35.8 104.6 35.1 103.3 33.7 102.5 32.3 102.5"/><path class="line_6" stroke-width="2" stroke="#FFF" opacity="0.2" fill="#FFF" d="M4.1 40.6C2.7 40.6 1.3 41.4 0.5 42.7 -0.6 44.8 0.1 47.4 2 48.5L30.3 65.5C30.9 65.9 31.6 66.1 32.3 66.1 33.7 66.1 35.1 65.3 35.8 64 37 62 36.3 59.4 34.3 58.2L6.1 41.2C5.5 40.8 4.8 40.6 4.1 40.6"/></g></svg> <!-- Loader 4 --> <svg class="loader_4" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="-50 -50 244 265"><title>Loader</title><desc>Lines arranged in a circle</desc><g><path class="line_1" stroke-width="2" stroke="#FFF" fill="#FFF" d="M72.7 0.6L72.7 0.6C74.8 0.6 76.4 2.4 76.4 4.6L76.4 36.6C76.4 38.8 74.8 40.6 72.7 40.6 70.7 40.6 69.1 38.8 69.1 36.6L69.1 4.6C69.1 2.4 70.7 0.6 72.7 0.6"/><path class="line_2" stroke-width="2" stroke="#FFF" opacity="0.8" fill="#FFF" d="M137.8 40.6C137.1 40.6 136.4 40.8 135.7 41.2L107.5 58.2C105.6 59.4 104.9 62 106 64 106.8 65.3 108.1 66.1 109.6 66.1 110.2 66.1 110.9 65.9 111.6 65.5L139.8 48.5C141.8 47.4 142.4 44.8 141.3 42.7 140.6 41.4 139.2 40.6 137.8 40.6"/><path class="line_3" stroke-width: "2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M109.6 102.5C108.1 102.5 106.8 103.3 106 104.6 104.9 106.7 105.6 109.3 107.5 110.5L135.7 127.4C136.4 127.8 137.1 128 137.8 128 139.2 128 140.6 127.3 141.3 125.9 142.4 123.9 141.8 121.3 139.8 120.1L111.6 103.1C110.9 102.7 110.2 102.5 109.6 102.5"/><path class="line_4" stroke-width="2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M72.7 124.4C70.7 124.4 69.1 126.2 69.1 128.4L69.1 160.4C69.1 162.6 70.7 164.4 72.7 164.4 74.8 164.4 76.4 162.6 76.4 160.4L76.4 128.4C76.4 126.2 74.8 124.4 72.7 124.4"/><path class="line_5" stroke-width="2" stroke="#FFF" opacity="0.4" fill="#FFF" d="M32.3 102.5C31.6 102.5 30.9 102.7 30.3 103.1L2 120.1C0.1 121.3-0.6 123.9 0.5 125.9 1.3 127.3 2.7 128 4.1 128 4.8 128 5.5 127.8 6.1 127.4L34.3 110.5C36.3 109.3 37 106.7 35.8 104.6 35.1 103.3 33.7 102.5 32.3 102.5"/><path class="line_6" stroke-width="2" stroke="#FFF" opacity="0.2" fill="#FFF" d="M4.1 40.6C2.7 40.6 1.3 41.4 0.5 42.7 -0.6 44.8 0.1 47.4 2 48.5L30.3 65.5C30.9 65.9 31.6 66.1 32.3 66.1 33.7 66.1 35.1 65.3 35.8 64 37 62 36.3 59.4 34.3 58.2L6.1 41.2C5.5 40.8 4.8 40.6 4.1 40.6"/></g></svg>
</div> <script src="js/index.js"></script>
</body>
</html>

SVG Loaders - Script Codes CSS Codes

body { background: #0099FF;
}
.demo { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
svg { margin: 80px;
}
.loader_1 .line_1,
.loader_1 .line_2,
.loader_1 .line_3,
.loader_1 .line_4,
.loader_1 .line_5,
.loader_1 .line_6 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: grow 1s infinite; animation: grow 1s infinite;
}
.loader_1 .line_2 { -webkit-animation-delay: 150ms; animation-delay: 150ms;
}
.loader_1 .line_3 { -webkit-animation-delay: 350ms; animation-delay: 350ms;
}
.loader_1 .line_4 { -webkit-animation-delay: 550ms; animation-delay: 550ms;
}
.loader_1 .line_5 { -webkit-animation-delay: 750ms; animation-delay: 750ms;
}
.loader_1 .line_6 { -webkit-animation-delay: 900ms; animation-delay: 900ms;
}
@-webkit-keyframes grow { 10% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; }
}
@keyframes grow { 10% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; }
}
.loader_2 { -webkit-transform-origin: center; transform-origin: center; -webkit-animation: loader-2 1s infinite; animation: loader-2 1s infinite;
}
.loader_2 .line_1,
.loader_2 .line_2,
.loader_2 .line_3,
.loader_2 .line_4,
.loader_2 .line_5,
.loader_2 .line_6 { opacity: 1; -webkit-animation: color-2 1s infinite; animation: color-2 1s infinite;
}
@-webkit-keyframes loader-2 { 50% { -webkit-transform: rotate(360deg) rotateY(180deg) rotateX(180deg) scale(0.7); transform: rotate(360deg) rotateY(180deg) rotateX(180deg) scale(0.7); }
}
@keyframes loader-2 { 50% { -webkit-transform: rotate(360deg) rotateY(180deg) rotateX(180deg) scale(0.7); transform: rotate(360deg) rotateY(180deg) rotateX(180deg) scale(0.7); }
}
@-webkit-keyframes color-2 { 50% { opacity: .6; }
}
@keyframes color-2 { 50% { opacity: .6; }
}
.loader_3 { -webkit-animation: loader-3 1s infinite; animation: loader-3 1s infinite;
}
@-webkit-keyframes loader-3 { 40% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 80% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
}
@keyframes loader-3 { 40% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 80% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
}
.loader_4 { -webkit-animation: loader-4 1s infinite linear; animation: loader-4 1s infinite linear;
}
.loader_4 .line_1,
.loader_4 .line_2,
.loader_4 .line_3,
.loader_4 .line_4,
.loader_4 .line_5,
.loader_4 .line_6 { opacity: 1; -webkit-animation: color-4 1s infinite; animation: color-4 1s infinite;
}
.loader_4 .line_2 { -webkit-animation-delay: 150ms; animation-delay: 150ms;
}
.loader_4 .line_2 { -webkit-animation-delay: 300ms; animation-delay: 300ms;
}
.loader_4 .line_4 { -webkit-animation-delay: 550ms; animation-delay: 550ms;
}
.loader_4 .line_5 { -webkit-animation-delay: 750ms; animation-delay: 750ms;
}
.loader_4 .line_2 { -webkit-animation-delay: 900ms; animation-delay: 900ms;
}
@-webkit-keyframes loader-4 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg) scale(0.7); transform: rotate(180deg) scale(0.7); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loader-4 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg) scale(0.7); transform: rotate(180deg) scale(0.7); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes color-4 { 50% { opacity: .3; }
}
@keyframes color-4 { 50% { opacity: .3; }
}

SVG Loaders - Script Codes JS Codes

/*
Exploring loader animations for some NowSecure buttons
:collision:
*/
SVG Loaders - Script Codes
SVG Loaders - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4
Size 3,649 Kb
Views 26,312
Do you need developer help for SVG Loaders?

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!

Joni Trythall (jonitrythall) Script Codes
Name
Flexbox Tinkering
Brian The CSS Bee
Weird Circle Loader
Floated Image Link Issue
Nested Noodle Loader
Simple CSS Flag
CSS Pencil Scoop Logo
Frosted Glass Quote
Rainbow Loader
Hinged Twitter Button
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!