Official Bentley Systems Spinner (SVG Edition)
How do I make an official bentley systems spinner (svg edition)?
What is a official bentley systems spinner (svg edition)? How do you make a official bentley systems spinner (svg edition)? This script and codes were developed by Jon Graft on 30 January 2023, Monday.
Official Bentley Systems Spinner (SVG Edition) Previews
Official Bentley Systems Spinner (SVG Edition) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Official Bentley Systems Spinner (SVG Edition)</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div style="height: 100%; width: 100%;"> <div class="col1" id="dark"> <h1>Spinner - Light Theme (SVG)</h1> <hr /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" preserveAspectRatio="xMinYMin meet" version="1.1" class="spinner"> <path class="l7" d="m14,41.321c0.43301,0.25,1.3478,0.7764,1.799-0.11602l4.067-8.0442-1.7321-1-4.933,7.5442c-0.54282,0.90459,0.36603,1.366,0.79904,1.616z" /> <path class="l1" d="m34,6.6795c-0.43301-0.25-1.3478-0.7764-1.799,0.11602l-4.067,8.0442,1.7321,1,4.933-7.5442c0.543-0.9049-0.366-1.3663-0.799-1.6163z" /> <path class="l6" d="m24,44c0.5,0,1.5555-0.0015,1.5-1l-0.5-9h-2l-0.5,9c-0.0178,1.0548,1,1,1.5,1z" /> <path class="l5" d="m34,41.321c0.43301-0.25,1.3463-0.77907,0.79904-1.616l-4.933-7.5442-1.7321,1,4.067,8.0442c0.51199,0.92239,1.366,0.36602,1.799,0.11603z" /> <path class="l4" d="m41.321,34c0.25-0.43301,0.7764-1.3478-0.11602-1.799l-8.0442-4.067-1,1.7321,7.5442,4.933c0.90459,0.54282,1.366-0.36603,1.616-0.79904z" /> <path class="l3" d="m44,24c0-0.5-0.0015-1.5555-1-1.5l-9,0.5v2l9,0.5c1.0548,0.0178,1-1,1-1.5z" /> <path class="l2" d="m41.321,14c-0.25-0.43301-0.77907-1.3463-1.616-0.79904l-7.5442,4.933,1,1.7321,8.0442-4.067c0.92239-0.51199,0.36602-1.366,0.11603-1.799z" /> <path class="l8" d="m6.6795,34c0.25,0.43301,0.77907,1.3463,1.616,0.79904l7.5442-4.933-1-1.7321-8.0442,4.067c-0.92239,0.51199-0.36602,1.366-0.11603,1.799z" /> <path class="l9" d="m4,24c-2E-7,0.5,0.00154,1.5555,1,1.5l9-0.5v-2l-9-0.5c-1.0548-0.0178-1,1-1,1.5z" /> <path class="l10" d="m6.6795,14c-0.25,0.43301-0.77644,1.3478,0.11603,1.799l8.0442,4.067,1-1.732-7.5445-4.933c-0.9046-0.543-1.366,0.366-1.616,0.799z" /> <path class="l11" d="m14,6.6795c-0.43301,0.25-1.3463,0.77907-0.79904,1.616l4.933,7.5442,1.7321-1-4.067-8.0442c-0.512-0.9227-1.366-0.3663-1.799-0.1163z" /> <path class="l12" d="m24.002,4.0005c-0.5-1E-7-1.5555,0.00154-1.5,1l0.5,9h2l0.5-9c0.0178-1.0548-1-1-1.5-1z" /> </svg> <br /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" preserveAspectRatio="xMinYMin meet" version="1.1" class="spinner" style="height:64px; width:64px;"> <path class="l7" d="m14,41.321c0.43301,0.25,1.3478,0.7764,1.799-0.11602l4.067-8.0442-1.7321-1-4.933,7.5442c-0.54282,0.90459,0.36603,1.366,0.79904,1.616z" /> <path class="l1" d="m34,6.6795c-0.43301-0.25-1.3478-0.7764-1.799,0.11602l-4.067,8.0442,1.7321,1,4.933-7.5442c0.543-0.9049-0.366-1.3663-0.799-1.6163z" /> <path class="l6" d="m24,44c0.5,0,1.5555-0.0015,1.5-1l-0.5-9h-2l-0.5,9c-0.0178,1.0548,1,1,1.5,1z" /> <path class="l5" d="m34,41.321c0.43301-0.25,1.3463-0.77907,0.79904-1.616l-4.933-7.5442-1.7321,1,4.067,8.0442c0.51199,0.92239,1.366,0.36602,1.799,0.11603z" /> <path class="l4" d="m41.321,34c0.25-0.43301,0.7764-1.3478-0.11602-1.799l-8.0442-4.067-1,1.7321,7.5442,4.933c0.90459,0.54282,1.366-0.36603,1.616-0.79904z" /> <path class="l3" d="m44,24c0-0.5-0.0015-1.5555-1-1.5l-9,0.5v2l9,0.5c1.0548,0.0178,1-1,1-1.5z" /> <path class="l2" d="m41.321,14c-0.25-0.43301-0.77907-1.3463-1.616-0.79904l-7.5442,4.933,1,1.7321,8.0442-4.067c0.92239-0.51199,0.36602-1.366,0.11603-1.799z" /> <path class="l8" d="m6.6795,34c0.25,0.43301,0.77907,1.3463,1.616,0.79904l7.5442-4.933-1-1.7321-8.0442,4.067c-0.92239,0.51199-0.36602,1.366-0.11603,1.799z" /> <path class="l9" d="m4,24c-2E-7,0.5,0.00154,1.5555,1,1.5l9-0.5v-2l-9-0.5c-1.0548-0.0178-1,1-1,1.5z" /> <path class="l10" d="m6.6795,14c-0.25,0.43301-0.77644,1.3478,0.11603,1.799l8.0442,4.067,1-1.732-7.5445-4.933c-0.9046-0.543-1.366,0.366-1.616,0.799z" /> <path class="l11" d="m14,6.6795c-0.43301,0.25-1.3463,0.77907-0.79904,1.616l4.933,7.5442,1.7321-1-4.067-8.0442c-0.512-0.9227-1.366-0.3663-1.799-0.1163z" /> <path class="l12" d="m24.002,4.0005c-0.5-1E-7-1.5555,0.00154-1.5,1l0.5,9h2l0.5-9c0.0178-1.0548-1-1-1.5-1z" /> </svg> </div> <div class="col2" id="light"> <h1>Spinner - Dark Theme (SVG)</h1> <hr /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" preserveAspectRatio="xMinYMin meet" version="1.1" class="spinner"> <path class="l7" d="m14,41.321c0.43301,0.25,1.3478,0.7764,1.799-0.11602l4.067-8.0442-1.7321-1-4.933,7.5442c-0.54282,0.90459,0.36603,1.366,0.79904,1.616z" /> <path class="l1" d="m34,6.6795c-0.43301-0.25-1.3478-0.7764-1.799,0.11602l-4.067,8.0442,1.7321,1,4.933-7.5442c0.543-0.9049-0.366-1.3663-0.799-1.6163z" /> <path class="l6" d="m24,44c0.5,0,1.5555-0.0015,1.5-1l-0.5-9h-2l-0.5,9c-0.0178,1.0548,1,1,1.5,1z" /> <path class="l5" d="m34,41.321c0.43301-0.25,1.3463-0.77907,0.79904-1.616l-4.933-7.5442-1.7321,1,4.067,8.0442c0.51199,0.92239,1.366,0.36602,1.799,0.11603z" /> <path class="l4" d="m41.321,34c0.25-0.43301,0.7764-1.3478-0.11602-1.799l-8.0442-4.067-1,1.7321,7.5442,4.933c0.90459,0.54282,1.366-0.36603,1.616-0.79904z" /> <path class="l3" d="m44,24c0-0.5-0.0015-1.5555-1-1.5l-9,0.5v2l9,0.5c1.0548,0.0178,1-1,1-1.5z" /> <path class="l2" d="m41.321,14c-0.25-0.43301-0.77907-1.3463-1.616-0.79904l-7.5442,4.933,1,1.7321,8.0442-4.067c0.92239-0.51199,0.36602-1.366,0.11603-1.799z" /> <path class="l8" d="m6.6795,34c0.25,0.43301,0.77907,1.3463,1.616,0.79904l7.5442-4.933-1-1.7321-8.0442,4.067c-0.92239,0.51199-0.36602,1.366-0.11603,1.799z" /> <path class="l9" d="m4,24c-2E-7,0.5,0.00154,1.5555,1,1.5l9-0.5v-2l-9-0.5c-1.0548-0.0178-1,1-1,1.5z" /> <path class="l10" d="m6.6795,14c-0.25,0.43301-0.77644,1.3478,0.11603,1.799l8.0442,4.067,1-1.732-7.5445-4.933c-0.9046-0.543-1.366,0.366-1.616,0.799z" /> <path class="l11" d="m14,6.6795c-0.43301,0.25-1.3463,0.77907-0.79904,1.616l4.933,7.5442,1.7321-1-4.067-8.0442c-0.512-0.9227-1.366-0.3663-1.799-0.1163z" /> <path class="l12" d="m24.002,4.0005c-0.5-1E-7-1.5555,0.00154-1.5,1l0.5,9h2l0.5-9c0.0178-1.0548-1-1-1.5-1z" /> </svg> <br /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" preserveAspectRatio="xMinYMin meet" version="1.1" class="spinner" style="height:64px; width:64px;"> <path class="l7" d="m14,41.321c0.43301,0.25,1.3478,0.7764,1.799-0.11602l4.067-8.0442-1.7321-1-4.933,7.5442c-0.54282,0.90459,0.36603,1.366,0.79904,1.616z" /> <path class="l1" d="m34,6.6795c-0.43301-0.25-1.3478-0.7764-1.799,0.11602l-4.067,8.0442,1.7321,1,4.933-7.5442c0.543-0.9049-0.366-1.3663-0.799-1.6163z" /> <path class="l6" d="m24,44c0.5,0,1.5555-0.0015,1.5-1l-0.5-9h-2l-0.5,9c-0.0178,1.0548,1,1,1.5,1z" /> <path class="l5" d="m34,41.321c0.43301-0.25,1.3463-0.77907,0.79904-1.616l-4.933-7.5442-1.7321,1,4.067,8.0442c0.51199,0.92239,1.366,0.36602,1.799,0.11603z" /> <path class="l4" d="m41.321,34c0.25-0.43301,0.7764-1.3478-0.11602-1.799l-8.0442-4.067-1,1.7321,7.5442,4.933c0.90459,0.54282,1.366-0.36603,1.616-0.79904z" /> <path class="l3" d="m44,24c0-0.5-0.0015-1.5555-1-1.5l-9,0.5v2l9,0.5c1.0548,0.0178,1-1,1-1.5z" /> <path class="l2" d="m41.321,14c-0.25-0.43301-0.77907-1.3463-1.616-0.79904l-7.5442,4.933,1,1.7321,8.0442-4.067c0.92239-0.51199,0.36602-1.366,0.11603-1.799z" /> <path class="l8" d="m6.6795,34c0.25,0.43301,0.77907,1.3463,1.616,0.79904l7.5442-4.933-1-1.7321-8.0442,4.067c-0.92239,0.51199-0.36602,1.366-0.11603,1.799z" /> <path class="l9" d="m4,24c-2E-7,0.5,0.00154,1.5555,1,1.5l9-0.5v-2l-9-0.5c-1.0548-0.0178-1,1-1,1.5z" /> <path class="l10" d="m6.6795,14c-0.25,0.43301-0.77644,1.3478,0.11603,1.799l8.0442,4.067,1-1.732-7.5445-4.933c-0.9046-0.543-1.366,0.366-1.616,0.799z" /> <path class="l11" d="m14,6.6795c-0.43301,0.25-1.3463,0.77907-0.79904,1.616l4.933,7.5442,1.7321-1-4.067-8.0442c-0.512-0.9227-1.366-0.3663-1.799-0.1163z" /> <path class="l12" d="m24.002,4.0005c-0.5-1E-7-1.5555,0.00154-1.5,1l0.5,9h2l0.5-9c0.0178-1.0548-1-1-1.5-1z" /> </svg> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Official Bentley Systems Spinner (SVG Edition) - Script Codes CSS Codes
/* NOT NEEDED FOR SPINNER */
body {font-family: 'Open Sans', sans-serif;}
.col1, .col2 { width: 48%; height: 100%; padding: 0 10px;
}
.col1 { background-color: #FFF; float: left;
}
.col2 { background-color: #212325; color: #FFF; float: right;
}
/* SPINNER */
@-webkit-keyframes spinnerAnimationLight { 0.000% {fill: #FFF;} /* start color */ 8.333% {fill: #FFF;} /* start color */ 33.333% {fill: #85929D;} /* end color */
}
@-moz-keyframes spinnerAnimationLight { 0.000% {fill: #FFF;} /* start color */ 8.333% {fill: #FFF;} /* start color */ 33.333% {fill: #85929D;} /* end color */
}
@-o-keyframes spinnerAnimationLight { 0.000% {fill: #FFF;} /* start color */ 8.333% {fill: #FFF;} /* start color */ 33.333% {fill: #85929D;} /* end color */
}
@keyframes spinnerAnimationLight { 0.000% {fill: #FFF;} /* start color */ 8.333% {fill: #FFF;} /* start color */ 33.333% {fill: #85929D;} /* end color */
}
#light .spinner .l1, #light .spinner .l2, #light .spinner .l3, #light .spinner .l4, #light .spinner .l5, #light .spinner .l6, #light .spinner .l7, #light .spinner .l8, #light .spinner .l5, #light .spinner .l6, #light .spinner .l7, #light .spinner .l8, #light .spinner .l9, #light .spinner .l10, #light .spinner .l11, #light .spinner .l12 { -webkit-animation-name: spinnerAnimationLight; -moz-animation-name: spinnerAnimationLight; -o-animation-name: spinnerAnimationLight; animation-name: spinnerAnimationLight; fill: #85929D; /*end color*/
}
#dark { background: white; color:black;}
@-webkit-keyframes spinnerAnimationDark { 0.000% {fill: #000;} /* start color */ 8.333% {fill: #000;} /* start color */ 33.333% {fill: #677480;} /* end color */
}
@-moz-keyframes spinnerAnimationDark { 0.000% {fill: #000;} /* start color */ 8.333% {fill: #000;} /* start color */ 33.333% {fill: #677480;} /* end color */
}
@-o-keyframes spinnerAnimationDark { 0.000% {fill: #000;} /* start color */ 8.333% {fill: #000;} /* start color */ 33.333% {fill: #677480;} /* end color */
}
@keyframes spinnerAnimationDark { 0.000% {fill: #000;} 8.333% {fill: #000;} /* start color */ 33.333% {fill: #808080;} /* end color */
}
#dark .spinner .l1, #dark .spinner .l2, #dark .spinner .l3, #dark .spinner .l4, #dark .spinner .l5, #dark .spinner .l6, #dark .spinner .l7, #dark .spinner .l8, #dark .spinner .l5, #dark .spinner .l6, #dark .spinner .l7, #dark .spinner .l8, #dark .spinner .l9, #dark .spinner .l10, #dark .spinner .l11, #dark .spinner .l12 { -webkit-animation-name: spinnerAnimationDark; -moz-animation-name: spinnerAnimationDark; -o-animation-name: spinnerAnimationDark; animation-name: spinnerAnimationDark; fill: #677480; /*end color*/
}
.spinner { width:24px; height:24px;}
.spinner .l1, .spinner .l2, .spinner .l3, .spinner .l4, .spinner .l5, .spinner .l6, .spinner .l7, .spinner .l8, .spinner .l5, .spinner .l6, .spinner .l7, .spinner .l8, .spinner .l9, .spinner .l10, .spinner .l11, .spinner .l12 { -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: linear steps(12); -moz-animation-duration: 1.5s; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-timing-function: linear steps(12); -o-animation-duration: 1.5s; -o-animation-iteration-count: infinite; -o-animation-direction: normal; -o-animation-timing-function: linear steps(12); animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: linear steps(12);
}
.spinner .l1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s;
}
.spinner .l2 { -webkit-animation-delay: 0.125s; -moz-animation-delay: 0.125s; -o-animation-delay: 0.125s; animation-delay: 0.125s;
}
.spinner .l3 { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s;
}
.spinner .l4 { -webkit-animation-delay: 0.375s; -moz-animation-delay: 0.375s; -o-animation-delay: 0.375s; animation-delay: 0.375s;
}
.spinner .l5 { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s;
}
.spinner .l6 { -webkit-animation-delay: 0.625s; -moz-animation-delay: 0.625s; -o-animation-delay: 0.625s; animation-delay: 0.625s;
}
.spinner .l7 { -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s; -o-animation-delay: 0.75s; animation-delay: 0.75s;
}
.spinner .l8 { -webkit-animation-delay: 0.875s; -moz-animation-delay: 0.875s; -o-animation-delay: 0.875s; animation-delay: 0.875s;
}
.spinner .l9 { -webkit-animation-delay: 1.0s; -moz-animation-delay: 1.0s; -o-animation-delay: 1.0s; animation-delay: 1.0s;
}
.spinner .l10 { -webkit-animation-delay: 1.125s; -moz-animation-delay: 1.125s; -o-animation-delay: 1.125s; animation-delay: 1.125s;
}
.spinner .l11 { -webkit-animation-delay: 1.25s; -moz-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s;
}
.spinner .l12 { -webkit-animation-delay: 1.375s; -moz-animation-delay: 1.375s; -o-animation-delay: 1.375s; animation-delay: 1.375s;
}Official Bentley Systems Spinner (SVG Edition) - Script Codes JS Codes
/* WARNING! */
/* The SVG will not animate in IE10+ as detailed here: http://stackoverflow.com/questions/16234269/css-keyframed-animation-jumpy-in-ie10 */
/* We recommend using the PNG version of this spinner instead: https://codepen.io/FlyersPh9/pen/zrAwE */
| Developer | Jon Graft |
| Username | FlyersPh9 |
| Uploaded | January 30, 2023 |
| Rating | 3 |
| Size | 3,472 Kb |
| Views | 2,024 |
Do you need developer help for Official Bentley Systems Spinner (SVG Edition)?
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 Graft (FlyersPh9) Script Codes
| Name | Size |
| User Profile in CSS | 3,047 Kb |
| Simple Social Buttons from Dribbble | 2,918 Kb |
| A Pen by Jon Graft | 2,067 Kb |
| Bar Graph | 3,752 Kb |
| Bentley Systems Progress Bar | 2,687 Kb |
| Bentley Systems Cards | 2,022 Kb |
| ID Card | 2,700 Kb |
| Pie Chart | 5,153 Kb |
| Bentley Systems Dropdown Menus | 3,163 Kb |
| Bentley Systems CSS Buttons | 2,630 Kb |
Create amazing web content 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 |
| Dribbble Template | ExtremelyGinger | 2,204 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
| Svg sky | Omodev | 7,070 Kb |
| Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
| SVG hamburger menu button | Elifitch | 2,602 Kb |
| Spilled Paint | Darrylhuffman | 3,894 Kb |
| Multiple jCarousel | Pafnuty | 2,461 Kb |
| Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
| 03 - CSS Variables | Run-time | 2,682 Kb |
| Plotting Points with D3.js | Laurakelly | 31,996 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!