Cisco Logo Loading Animation

Developer
Jon Milner
Size
2,949 Kb
Views
95,128
  1. Cisco Logo Loading Animation Previews
  2. Cisco Logo Loading Animation HTML Codes
  3. Cisco Logo Loading Animation CSS Codes

How do I make an cisco logo loading animation?

What is a cisco logo loading animation? How do you make a cisco logo loading animation? This script and codes were developed by Jon Milner on 09 December 2022, Friday.

Cisco Logo Loading Animation Previews
IQ Test

Cisco Logo Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cisco Logo Loading Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="logo" x="0px" y="0px" width="200.1px" height="105.4px" viewBox="-305 291.9 200.1 105.4"> <g class="logo__mark"> <path d="M-296.2,324.6c0-2.4-2-4.3-4.4-4.3s-4.4,1.9-4.4,4.3v9.1c0,2.4,2,4.4,4.4,4.4s4.4-1.9,4.4-4.4V324.6z"/> <path transform="translate(97.7633,748.5409)" d="M-370.1-435.9c0-2.4-2-4.3-4.4-4.3c-2.4,0-4.4,1.9-4.4,4.3v21.1c0,2.4,2,4.3,4.4,4.3c2.4,0,4.4-1.9,4.4-4.3V-435.9z"/> <path transform="translate(106.3727,754.4384)" d="M-354.8-458.2c0-2.4-2-4.3-4.4-4.3s-4.4,1.9-4.4,4.3v46.1c0,2.4,2,4.4,4.4,4.4s4.4-1.9,4.4-4.4V-458.2z"/> <path transform="translate(114.9821,748.5409)" d="M-339.5-435.9c0-2.4-2-4.3-4.4-4.3c-2.4,0-4.4,1.9-4.4,4.3v21.1c0,2.4,2,4.3,4.4,4.3c2.4,0,4.4-1.9,4.4-4.3V-435.9z"/> <path transform="translate(123.5817,744.2304)" d="M-324.2-419.6c0-2.4-1.9-4.3-4.3-4.3c-2.4,0-4.4,1.9-4.4,4.3v9.1c0,2.4,2,4.4,4.4,4.4c2.4,0,4.3-1.9,4.3-4.4V-419.6z"/> <path transform="translate(132.195,748.5409)" d="M-308.9-435.9c0-2.4-1.9-4.3-4.3-4.3s-4.3,1.9-4.3,4.3v21.1c0,2.4,1.9,4.3,4.3,4.3s4.3-1.9,4.3-4.3 C-308.9-414.8-308.9-435.9-308.9-435.9z"/> <path transform="translate(140.8102,754.4384)" d="M-293.6-458.2c0-2.4-1.9-4.3-4.3-4.3s-4.3,1.9-4.3,4.3v46.1c0,2.4,1.9,4.4,4.3,4.4s4.3-1.9,4.3-4.4V-458.2z"/> <path transform="translate(149.4235,748.5409)" d="M-278.3-435.9c0-2.4-1.9-4.3-4.4-4.3c-2.4,0-4.3,1.9-4.3,4.3v21.1c0,2.4,1.9,4.3,4.3,4.3c2.5,0,4.4-1.9,4.4-4.3 C-278.3-414.8-278.3-435.9-278.3-435.9z"/> <path transform="translate(158.0192,744.2304)" d="M-263-419.6c0-2.4-1.9-4.3-4.3-4.3s-4.3,1.9-4.3,4.3v9.1c0,2.4,1.9,4.4,4.3,4.4s4.3-1.9,4.3-4.4V-419.6z"/> </g> <g class="logo__type"> <path transform="translate(102.0426,727.2001)" d="M-362.5-355.3c-0.4-0.2-3.2-1.9-7.4-1.9c-5.7,0-9.6,3.9-9.6,9.3c0,5.2,3.8,9.3,9.6,9.3c4.1,0,7-1.6,7.4-1.8v9.3 c-1.1,0.3-4.1,1.2-8,1.2c-9.9,0-18.5-6.8-18.5-18c0-10.4,7.8-18,18.5-18c4.1,0,7.2,1,8,1.2V-355.3z"/> <path d="M-239.7,396.7h-8.8v-34.8h8.8V396.7z"/> <path transform="translate(121.5124,727.9413)" d="M-327.9-358.1c-0.1,0-3.8-1.1-6.9-1.1c-3.5,0-5.4,1.2-5.4,2.8c0,2.1,2.6,2.9,4,3.3l2.4,0.8c5.7,1.8,8.3,5.7,8.3,9.9 c0,8.7-7.7,11.7-14.4,11.7c-4.7,0-9-0.9-9.5-1v-8c0.8,0.2,4.4,1.3,8.3,1.3c4.4,0,6.4-1.3,6.4-3.2c0-1.8-1.7-2.8-3.9-3.5 c-0.5-0.2-1.3-0.4-1.9-0.6c-4.9-1.5-9-4.4-9-10.2c0-6.5,4.9-10.9,12.9-10.9c4.3,0,8.3,1,8.5,1.1v7.6H-327.9z"/> <path transform="translate(134.9958,727.2001)" d="M-303.9-355.3c-0.4-0.2-3.2-1.9-7.4-1.9c-5.7,0-9.6,3.9-9.6,9.3c0,5.2,3.8,9.3,9.6,9.3c4.1,0,7-1.6,7.4-1.8v9.3 c-1.1,0.3-4.1,1.2-8,1.2c-9.9,0-18.5-6.8-18.5-18c0-10.4,7.8-18,18.5-18c4.1,0,7.2,1,8,1.2V-355.3z"/> <path transform="translate(144.9274,727.8212)" d="M-286.3-357.7c-5.2,0-9.1,4.1-9.1,9.1c0,5.1,3.9,9.1,9.1,9.1s9.1-4.1,9.1-9.1S-281.1-357.7-286.3-357.7 M-267.9-348.5 c0,9.9-7.7,18-18.4,18s-18.4-8.1-18.4-18s7.7-18,18.4-18S-267.9-358.4-267.9-348.5"/> </g>
</svg>
</body>
</html>

Cisco Logo Loading Animation - Script Codes CSS Codes

@-webkit-keyframes loading { 25% { fill: #c6c7ca; } 50% { fill: #049fd9; } 75% { fill: #c6c7ca; }
}
@keyframes loading { 25% { fill: #c6c7ca; } 50% { fill: #049fd9; } 75% { fill: #c6c7ca; }
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; margin: 0; background: #f3f3f3;
}
.logo { width: 180px; fill: #c6c7ca;
}
.logo__mark > path { -webkit-animation: loading 1.25s ease-in-out infinite reverse; animation: loading 1.25s ease-in-out infinite reverse;
}
.logo__mark > path:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s;
}
.logo__mark > path:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
.logo__mark > path:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;
}
.logo__mark > path:nth-child(4) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s;
}
.logo__mark > path:nth-child(5) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s;
}
.logo__mark > path:nth-child(6) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;
}
.logo__mark > path:nth-child(7) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s;
}
.logo__mark > path:nth-child(8) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s;
}
.logo__mark > path:nth-child(9) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s;
}
Cisco Logo Loading Animation - Script Codes
Cisco Logo Loading Animation - Script Codes
Home Page Home
Developer Jon Milner
Username jonmilner
Uploaded December 09, 2022
Rating 3
Size 2,949 Kb
Views 95,128
Do you need developer help for Cisco Logo Loading Animation?

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!

Jon Milner (jonmilner) Script Codes
Name
Basic Custom Select Element
Responsive Card Layout using CSS Columns
Animated Multi-Step Progress Bar
Responsive Hexagon Layout using Sass Mixin
A Pen by Jon Milner
Playing Around with AMCSS
Simple CSS Radial Progress Bar
Kirby in CSS
Custom Form Styles
Playing Around with BEM
Create amazing video scripts 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!