three-dots

WebJar for three-dots

License	License MIT
GroupId	GroupId org.webjars.npm
ArtifactId	ArtifactId three-dots
Last Version	Last Version 0.2.0
Release Date	Release Date Nov 25, 2020
Type	Type jar
Description	Description three-dots WebJar for three-dots
Project URL	Project URL https://www.webjars.org
Source Code Management	Source Code Management https://github.com/nzbin/three-dots

Download three-dots

Filename	Size
three-dots-0.2.0.pom
three-dots-0.2.0.jar	41 KB
three-dots-0.2.0-sources.jar	22 bytes
three-dots-0.2.0-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/three-dots/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>three-dots</artifactId>
    <version>0.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/three-dots/
implementation 'org.webjars.npm:three-dots:0.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/three-dots/
implementation ("org.webjars.npm:three-dots:0.2.0")

Apache Buildr

'org.webjars.npm:three-dots:jar:0.2.0'

Apache Ivy

<dependency org="org.webjars.npm" name="three-dots" rev="0.2.0">
  <artifact name="three-dots" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='three-dots', version='0.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "three-dots" % "0.2.0"

Leiningen

[org.webjars.npm/three-dots "0.2.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Three Dots

The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only enhance your CSS skills but also improve your imagination.

The LESS files are contributed by other people, it's not the newest.

Installation

$ npm install three-dots --save

Usage

Include the CSS in your file:

<link href="/path/to/three-dots.css" rel="stylesheet">

Add just one div tag:

<div class="dot-elastic"></div>

Here’s the list of three-dots classes you can choose from:

dot-elastic
dot-pulse
dot-flashing
dot-collision
dot-revolution
dot-carousel
dot-typing
dot-windmill
dot-bricks
dot-floating
dot-fire
dot-spin
dot-falling
dot-stretching

Customization

Checkout this repo and

$ npm install

Customize the dots size ( color, spacing, etc. ) in the _variables.scss file.

$dot-width: 10px;
$dot-height: 10px;
$dot-radius: $dot-width/2;

$dot-color: #9880ff;
$dot-bg-color: $dot-color;
$dot-before-color: $dot-color;
$dot-after-color: $dot-color;

$dot-spacing: $dot-width + $dot-width/2;