Created Simulates Inspired Loading Animation Effect In JavaScript | Atom.io

atom-loading-animation

Atom loading is an animated and configurable atomic loading effect inspired by Atom.io. Create new branches, arrange and commit, push and pull, resolve merge conflicts, view pull requests, and more – all from within your editor.

The GitHub package is already bundled with Atom.

How to make use of it:

1. Import the icon.js.

import mount from "./icon.js"

2. Create a container to carry the atom loading impact.

<div id="container"></div>

3. Add your individual brand to the loading impact.

<img width="120px" style="position: absolute;left: calc(50% - 60px);top: 190px" src="logo.svg" />

4. Config the loading impact.

mount("#container", [
  {
    r: 36,
    width: 0.4,
    color: "rgba(95, 143, 181, 1)",
    dashArray: ["1%", "10.3%", "22%"],
    speed: 50
  },
  {
    r: 36,
    width: 0.4,
    color: "rgba(95, 143, 181, 0.3)",
    dashArray: ["20%", "12%"],
    speed: 50
  },
  {
    r: 31,
    width: 1,
    color: "rgba(120, 175, 159, 1)",
    dashArray: ["1%", "12.3%", "15.3%"],
    speed: 50
  },
  {
    r: 31,
    width: 1,
    color: "rgba(120, 175, 159, 0.3)",
    offset: "-8",
    dashArray: ["1%", "14%", "15%", "5%", "6%"],
    speed: 50
  },
  {
    r: 28.9,
    width: 1.5,
    color: "rgba(198, 139, 34, 1)",
    dashArray: ["1%", "8%", "20%"],
    speed: 40
  },
  {
    r: 28.9,
    width: 1.5,
    color: "rgba(198, 139, 34, 0.3)",
    offset: "15",
    dashArray: ["1%", "20%", "5%"],
    speed: 40
  },
  {
    r: 27,
    width: 1,
    color: "rgba(193, 93, 15, 1)",
    dashArray: ["1%", "13%", "5%"],
    speed: 37
  },
  {
    r: 27,
    width: 1,
    color: "rgba(193, 93, 5, 0.3)",
    dashArray: [ "14%", "15%"],
    offset: "-6",
    speed: 37
  },
  {
    r: 25,
    width: 0.6,
    color: "rgb(170,52,9)",
    dashArray: ["2%", "8%", "0.4%"],
    speed: 30
  },
  {
    r: 25,
    width: 0.6,
    color: "rgba(170,52,9,0.3)",
    dashArray: ["15%"],
    offset: "8",
    speed: 28
  },
])

Atom.io Inspired Loading Effect In JavaScript, atom loading Plugin/Github


See Demo And Download

Official Website(aolyang): Click Here

This superior jQuery/javascript plugin is developed by aolyang. For extra Advanced usage, please go to the official website.

Share