Skip to content

Installation & quick start

Get ready to explore the innovative approach of radial design with Orbit! This guide will help you quickly get started and install everything you need.

πŸš€ Try Orbit now!

To quickly get a taste of Orbit, you can try it directly in a Orbit Codepen template.

Installation

Orbit comes with just two files: orbit.css (or orbit.min.css), and orbit.js (or orbit.min.js).

Getting the Orbit files:

You have three ways to get Orbit files:

1. Download the Orbit files

2. Use Orbit via CDN (content delivery network)

3. Install Orbit via a Package Manager

You can also install Orbit using npm, yarn or pnpm:

Terminal window
npm i @zumer/orbit

Setting up Orbit in your project:

After install Orbit, follow this simple steps to get Orbit working.

If you have downloaded them just use <link> tag for the CSS file, and <script> tag for the JS file within the <head> section:

In case you have downloaded the files:

<head>
<link rel="stylesheet" href="path/to/orbit.css">
<script src="path/to/orbit.js"></script>
</head>

In case you are using CDN:

<head>
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
</head>

🏁 Quick start

Basic Orbit layout

Just add .bigbang CSS class in a HTML element like <div>. Then use .gravity-spot class, and within it, add another element with .orbit class. Finally, inside .orbit element, add radial elements, such us: .satellite, .vector, .side, or <o-text>, <o-slice>, <o-progress> web components . Here’s a minimal working example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css" />
<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js" defer></script>
<title>Orbit Quick Start</title>
</head>
<body>
<div class="bigbang">
<div class="gravity-spot">
<div class="orbit">
<div class="satellite">1</div>
<div class="satellite">2</div>
<div class="satellite">3</div>
</div>
<div class="orbit">
<o-text>Curved text</o-text>
</div>
</div>
</div>
</body>
</html>

Next steps

Congratulations! You have successfully integrated Orbit into your project. Now, you can explore more advanced features and customization options. Check out the full documentation for detailed guides and examples.

Happy coding!