blob: 9c17af9835e731cf707e3e8869b961f63222947d [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Trace Compass</title>
<link rel="shortcut icon" href="/tracecompass/favico.png">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.18/ua-parser.min.js"></script>
<!-- Google font -->
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round"
rel="stylesheet">
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Owl Carousel -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<!-- Magnific Popup -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"/>
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css"
href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/vendor/cookieconsent/cookieconsent.min.css" />
<script
src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/vendor/cookieconsent/default.min.js"></script>
</head>
<body>
<!-- Header -->
<header id="home">
<!-- Background Image -->
<div class="bg-img"
style="background-image: url('./img/TCBackground.png');">
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Nav -->
<nav id="nav" class="navbar nav-transparent">
<div class="container">
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand">
<a href="index.html"> <img class="logo"
src="img/tc_icon_256x256.png" alt="logo"> <img
class="logo-alt" src="img/tc_icon_256x256.png" alt="logo">
</a>
</div>
<!-- /Logo -->
<!-- Collapse nav button -->
<div class="nav-collapse">
<span></span>
</div>
<!-- /Collapse nav button -->
</div>
<!-- Main navigation -->
<ul class="main-nav nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#screenshots">Screenshots</a></li>
<li><a href="#about">Key Features</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#getting">Downloads</a></li>
<li><a href="#docs">Documentation</a></li>
<li><a href="#community">Community</a></li>
</ul>
<!-- /Main navigation -->
</div>
</nav>
<!-- /Nav -->
<!-- home wrapper -->
<div class="home-wrapper">
<div class="container">
<div class="row">
<!-- home content -->
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<img class="logo" src="img/tc-dark.png" alt="logo">
<p class="white-text">
<strong><em>Eclipse Trace Compass</em></strong> is an open
source application to solve performance and reliability issues by reading and analyzing <a
href="https://en.wikipedia.org/wiki/Tracing_(software)">traces</a> and <a
href="https://en.wikipedia.org/wiki/Logfile">logs</a> of a system.
Its goal is to provide views, graphs, metrics, and more to help
extract useful information from traces, in a way that is more
user-friendly and informative than huge text dumps.
</p>
<noscript>
<a
href="http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-linux.gtk.x86_64.tar.gz">
<button class="main-btn">
Downloads <br> <strong>Trace Compass</strong> <strong>6.0.0</strong>
&bull; Linux, 64-bit
</button>
</a>
</noscript>
<script type="text/javascript">
var versionNumber = '6.0.0';
var versionFiles = {
linux64 : 'http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-linux.gtk.x86_64.tar.gz',
win64 : 'http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-win32.win32.x86_64.zip',
osx64 : 'http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-macosx.cocoa.x86_64.tar.gz'
};
var parser = new UAParser();
var os = parser.getOS()['name'];
var cpu = parser.getCPU()['architecture'];
var versionOs = 'Linux';
var versionArch = '64-bit';
var idOs = 'linux';
var idArch = '64';
switch (os) {
case 'CentOS':
case 'Fedora':
case 'Debian':
case 'Gentoo':
case 'GNU':
case 'Linux':
case 'Mandriva':
case 'Mint':
case 'SUSE':
case 'Ubuntu':
case 'VectorLinux':
idOs = 'linux';
versionOs = os;
break;
case 'Windows':
idOs = 'win';
versionOs = os;
break;
case 'Mac OS':
idOs = 'osx';
versionOs = 'OS X';
break;
}
switch (cpu) {
case 'amd64':
case 'arm64':
idArch = '64';
versionArch = '64-bit';
break;
case 'arm':
case 'ia32':
break;
}
var fileUrl = versionFiles[idOs + idArch]
document.write('<a href="' + fileUrl + '">');
document
.write('<button class="main-btn">Downloads <br><strong>Trace Compass</strong> ');
document.write('<strong>' + versionNumber
+ '</strong> &bull; ' + versionOs
+ ', ' + versionArch);
document.write('</button></a>');
</script>
</div>
</div>
<!-- /home content -->
</div>
</div>
</div>
<!-- /home wrapper -->
</header>
<!-- /Header -->
<!-- screenshots -->
<div id="screenshots" class="section md-padding bg-grey">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Screenshots</h2>
</div>
<!-- /Section header -->
<!-- Work -->
<div class="col-md-6 col-xs-6 work">
<img class="img-responsive" src="img/shots/callstack.png" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Call Stack</span>
<h3>If you can define trace events representing function
entries and exits, you can display the call stack of your
application over time. You can also get profiling information from
the Flame Graph or descriptive statistics.</h3>
<div class="work-link">
<a class="lightbox" href="img/shots/callstack.png"><i
class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-6 col-xs-6 work">
<img class="img-responsive" src="img/shots/kernel.png" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Kernel Analysis</span>
<h3>Displays the states of processes and resources over time,
using information from Linux kernel traces.</h3>
<div class="work-link">
<a class="lightbox" href="img/shots/kernel.png"><i
class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-6 col-xs-6 work">
<img class="img-responsive" src="img/shots/memory.png" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>UST Memory</span>
<h3>Using LTTng-UST's C standard library wrapper, all calls
to memory allocation and free are traced. You can display the
memory utilization or find potential memory leaks.</h3>
<div class="work-link">
<a class="lightbox" href="img/shots/memory.png"><i
class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-6 col-xs-6 work">
<img class="img-responsive" src="img/shots/pcap.png" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Extend Trace Types</span>
<h3>The base framework can be extended to add support for new
trace types. Support for libpcap traces (the format used by
Wireshark) was added this way.</h3>
<div class="work-link">
<a class="lightbox" href="img/shots/pcap.png"><i
class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /screenshots -->
<!-- About -->
<div id="about" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Key Features</h2>
</div>
<!-- /Section header -->
<!-- about -->
<div class="col-md-12">
<div class="about">
<i class="fa fa-magic"></i>
<h3>Offline analysis of complex issues</h3>
<ul>
<li>Real-time deadline investigation</li>
<li>Latency analysis</li>
<li>Log correlation with operating system traces</li>
<li>Network packet correlation across layers</li>
<li>Identification of relevant information in large amounts
of trace data</li>
<li>Critical path analysis</li>
<li>Causes of high processor usage and memory leaks</li>
<li>Correlation of hardware and software components
execution traces</li>
<li>Time synchronization of traces from different nodes</li>
<li>Symbol name resolution using debug information</li>
<li>Additional analyses available with the Trace Compass Incubator</li>
<li>and more!</li>
</ul>
</div>
</div>
<!-- /about -->
<!-- about -->
<div class="col-md-12">
<div class="about">
<i class="fa fa-cogs"></i>
<h3>Multiple trace formats supported</h3>
<ul>
<li><a href="http://diamon.org/ctf">Common Trace Format</a>
(CTF), including but not limited to:
<ul>
<li>Linux <a href="https://lttng.org/">LTTng</a> kernel
traces
</li>
<li>Linux LTTng-UST userspace traces</li>
<li>Linux Perf traces <a
href="https://lwn.net/Articles/634333/">converted to CTF</a>
</li>
<li>Bare metal traces</li>
<li>Integration with the <a
href="https://github.com/lttng/lttng-analyses">LTTng-Analyses</a>
scripts
</li>
</ul></li>
<li>Hardware traces (e.g. IEEE Nexus 5001 CTF conversion).
See also <a
href="http://www.multicore-association.org/workgroup/tiwg.php">this
link</a>.
</li>
<li><a
href="https://sourceware.org/gdb/onlinedocs/gdb/Tracepoints.html">GDB
traces</a> for debugging</li>
<li>The <a
href="https://wiki.eclipse.org/images/e/e6/TA_BTF_Specification_2.1.3_Eclipse_Auto_IWG.pdf">Best
Trace Format</a> (BTF) for <a
href="http://en.wikipedia.org/wiki/OSEK">OSEK</a>
</li>
<li>The <a
href="http://wiki.wireshark.org/Development/LibpcapFileFormat">libpcap</a>
(Packet CAPture) format, for network traces
</li>
<li>Custom text or XML parsers that can be added right from
the graphical interface by the user</li>
<li>Can be extended to support various log or trace files.</li>
<li>Provided by the TraceCompass Incubator:
<ul>
<li>Linux <a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.ftrace.doc.user/User-Guide.html">FTrace</a> raw textual format
</li>
<li>Google's <a href="https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview#!">trace event</a> json format</li>
<li>Additional <a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.perf.profiling.doc.user/User-Guide.html">Linux Perf2ctf</a> traces features</li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.atrace.doc.user/User-Guide.html">Android traces</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.uftrace.doc.user/User-Guide.html">UFtrace format</a></li>
</ul></li>
</ul>
<p>
For more information, see the <a
href="doc/datasheet-tracecompass.pdf">Trace Compass
datasheet</a>.
</p>
</div>
</div>
<!-- /about -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /About -->
<!-- benefits -->
<div id="benefits" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Benefits</h2>
</div>
<!-- /Section header -->
<!-- benefits -->
<div class="col-md-12">
<div class="service">
<ul>
<li>Reduce time to identify faults</li>
<li>Observe multi-core, heterogeneous, virtualized, and
distributed systems</li>
<li>Use the same analysis tool for development, testing, and
production</li>
<li>Extend the framework to fit the needs of your
organization</li>
<li>Avoid vendor lock-in by using an open source solution</li>
</ul>
</div>
</div>
<!-- /benefits -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /benefits -->
<!-- downloads -->
<div id="getting" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Downloads</h2>
</div>
<!-- /Section header -->
<!-- downloads -->
<div class="col-sm-4">
<div class="pricing">
<div class="price-head">
<span class="price-title">Linux</span> <i> <img alt="#"
src="./img/tux.png" width="20%" height="20%" />
</i>
</div>
<div class="price-btn">
<a title="Linux, 64-bit"
href="http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-linux.gtk.x86_64.tar.gz">
<button class="outline-btn">64-bit</button>
</a>
</div>
</div>
</div>
<!-- /downloads -->
<!-- downloads -->
<div class="col-sm-4">
<div class="pricing">
<div class="price-head">
<span class="price-title">Windows</span> <i> <img alt="#"
src="./img/win.png" width="20%" height="20%" />
</i>
</div>
<div class="price-btn">
<a title="Windows, 64-bit"
href="http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-win32.win32.x86_64.zip">
<button class="outline-btn">64-bit</button>
</a>
</div>
</div>
</div>
<!-- /downloads -->
<!-- downloads -->
<div class="col-sm-4">
<div class="pricing">
<div class="price-head">
<span class="price-title">OS X</span> <i> <img alt="#"
src="./img/apple.png" width="20%" height="20%" />
</i>
</div>
<div class="price-btn">
<a title="OS X, 64-bit"
href="http://www.eclipse.org/downloads/download.php?file=/tracecompass/releases/6.0.0/rcp/trace-compass-6.0.0-20200610-1914-macosx.cocoa.x86_64.tar.gz">
<button class="outline-btn">64-bit</button>
</a>
</div>
</div>
</div>
<!-- /downloads -->
</div>
<!-- Row -->
<p>
To find out more about the release, see the <a href="https://wiki.eclipse.org/Trace_Compass/NewInTraceCompass">New &amp; Noteworthy</a> page for this release.
</p>
<p>
<a href="download.html">Other downloads and source code...</a>
</p>
</div>
<!-- /Container -->
</div>
<!-- /downloads -->
<!-- docs -->
<div id="docs" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Documentation</h2>
</div>
<div class="col-md-12">
<p>To get started with Trace Compass, you can follow this <a href="https://github.com/tuxology/tracevizlab">tutorial</a> that describe a few use cases of how to use tracing and Trace Compass.
<p>Here are the links to the Trace Compass user guides:</p>
<div class="service">
<ul>
<li><a
href="http://archive.eclipse.org/tracecompass/doc/stable/org.eclipse.tracecompass.doc.user/User-Guide.html">Trace
Compass User Guide</a></li>
<li><a
href="http://archive.eclipse.org/tracecompass/doc/stable/org.eclipse.tracecompass.tmf.pcap.doc.user/User-Guide.html">Pcap
Support User Guide</a></li>
<li><a
href="http://archive.eclipse.org/tracecompass/doc/stable/org.eclipse.tracecompass.gdbtrace.doc.user/User-Guide.html">GDB
Tracepoint Analysis User Guide</a></li>
<li>User Guides from the <a
href="http://archive.eclipse.org/tracecompass/doc/stable/org.eclipse.tracecompass.doc.user/Trace-Compass-Incubator.html#Trace_Compass_Incubator">
Trace Compass Incubator</a>:
<ul>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.ftrace.doc.user/User-Guide.html">FTrace User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.atrace.doc.user/User-Guide.html">Android Trace User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.uftrace.doc.user/User-Guide.html">UFTrace User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.perf.profiling.doc.user/User-Guide.html">Perf Profiling User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.callstack.doc.user/User-Guide.html">Generic Callstack Analysis User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.virtual.machine.analysis.doc.user/User-Guide.html">Virtual Machine Analysis User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.kernel.doc.user/User-Guide.html">Additional Analyses for Kernel Traces User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.opentracing.doc.user/User-Guide.html">OpenTracing Traces User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.ros.doc.user/User-Guide.html">Robot Operating System User Guide</a></li>
<li><a href="http://archive.eclipse.org/tracecompass.incubator/doc/org.eclipse.tracecompass.incubator.scripting.doc.user/User-Guide.html">Trace Compass EASE Scripting User Guide</a></li>
</ul>
</li>
</ul>
<p>
More information is available on the <a
href="https://wiki.eclipse.org/Trace_Compass">project's
official wiki</a>.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- docs -->
<!-- community -->
<div id="community" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section-header -->
<div class="section-header text-center">
<h2 class="title">Community</h2>
</div>
<!-- /Section-header -->
<!-- about -->
<div class="col-md-12">
<div class="about">
<i class="fa fa-users"></i>
<h3>Here are the various ways to join the Trace Compass
community:</h3>
<ul>
<li><a
href="https://dev.eclipse.org/mailman/listinfo/tracecompass-dev">Mailing
list</a>: <code>tracecompass-dev@eclipse.org</code></li>
<li><a href="irc://irc.oftc.net/tracecompass">IRC
channel</a>: <code>#tracecompass</code> on the <a
href="http://www.oftc.net/">OFTC network</a></li>
<li><a
href="http://projects.eclipse.org/projects/tools.tracecompass">Eclipse
Trace Compass Project Page</a></li>
<li><a
href="https://bugs.eclipse.org/bugs/enter_bug.cgi?product=Tracecompass">Report
a Bug</a></li>
</ul>
</div>
</div>
<!-- /about -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /community -->
<!-- acknowledgments -->
<div id="acknowledgments" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Acknowledgments</h2>
</div>
<!-- /Section header -->
<!-- acknowledgments -->
<div class="col-md-12">
<div class="owl-theme">
<div class="about">
<i>
<a href="https://www.yourkit.com/"> <img src="img/yklogo.png"></a>
</i>
<p>
YourKit supports open source projects with its full-featured
Java Profiler. YourKit, LLC is the creator of <a
href="https://www.yourkit.com/java/profiler/index.jsp">YourKit
Java Profiler</a> and <a
href="https://www.yourkit.com/.net/profiler/index.jsp">YourKit
.NET Profiler</a>, innovative and intelligent tools for profiling
Java and .NET applications.
</p>
</div>
</div>
</div>
<!-- /acknowledgments -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /acknowledgments -->
<!-- Footer -->
<footer id="footer" class="sm-padding bg-dark">
<!-- Container -->
<div class="container">
<div class="row">
<div class="col-md-6" style="text-align: center;">
<h3 style="color: white;">Eclipse Foundation</h3>
<ul style="list-style-type: none">
<li><a href="//www.eclipse.org/">Foundation</a></li>
<li><a href="//www.eclipse.org/org/">About Us</a></li>
<li><a href="//www.eclipse.org/org/foundation/contact.php">Contact
Us</a></li>
<li><a href="//www.eclipse.org/donate">Donate</a></li>
<li><a href="//www.eclipse.org/org/documents/">Governance</a></li>
</ul>
</div>
<div class="col-md-6" style="text-align: center;">
<h3 style="color: white;">Legal</h3>
<ul style="list-style-type: none;">
<li><a href="//www.eclipse.org/legal/privacy.php">Privacy
Policy</a></li>
<li><a href="//www.eclipse.org/legal/termsofuse.php">Terms
of Use</a></li>
<li><a href="//www.eclipse.org/legal/copyright.php">Copyright
Agent</a></li>
<li><a href="//www.eclipse.org/legal/">Legal Resources</a></li>
<li><a href="//www.eclipse.org/artwork/">Logo and Artwork</a></li>
</ul>
</div>
</div>
<div class="col-md-12">
<!-- footer copyright -->
<div class="footer-copyright">
<div>
<span class="hidden-print"><a
href="https://www.eclipse.org/"><img
src="https://projects.eclipse.org/sites/all/themes/solstice/public/images/logo/eclipse-logo-bw-800x188.png"
alt="Eclipse.org black and white logo" width="166" height="39"
class="logo-eclipse-white"></a></span>
<p id="copyright-text">
Copyright © 2017. All Rights Reserved. Designed by <a
href="https://colorlib.com" target="_blank">Colorlib</a>
</p>
</div>
</div>
<!-- /footer copyright -->
</div>
</div>
<!-- /Container -->
</footer>
<!-- /Footer -->
<!-- Back to top -->
<div id="back-to-top"></div>
<!-- /Back to top -->
<!-- Preloader -->
<div id="preloader">
<div class="preloader">
<span></span> <span></span> <span></span> <span></span>
</div>
</div>
<!-- /Preloader -->
<!-- jQuery Plugins -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>