I want custom numbers of dots , how can I achieve it ?

My use case is to have two different colors of dot-pulse animation on the same page when extending Sass modules.
For example: I use white dot-pulse on dark background and blue dot-pulse on white.

The following code does not work:

.dot-primary-sm {
    $dot-width: 2px;
    $dot-height: 2px;
    $dot-spacing: 6px;
    $dot-color: $trgl-brand-color;

    @import '~three-dots/sass/three-dots';
}

.dot-white-sm {
    $dot-width: 2px;
    $dot-height: 2px;
    $dot-spacing: 6px;
    $dot-color: $white;

    @import '~three-dots/sass/three-dots';
}

I suppose the issue is caused by box-shadow property that overrides color in keyframe animation.

I added to global.css but it doesn't work

@use 'three-dots';

An error while trying to use three-dots in Angular app

./src/app/app.module.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
/metaheuristic-angular/src/app/components/app-view/app-view.component.scss:17:100: ERROR: Unterminated string token

repo - https://github.com/sergmain/metaheuristic-angular

It would be nice to implement something like a theme to be able to change the color from js, because it may be being used from vue, react, etc.

I have updated Sass compiler and now it prints deprecation warnings when compiling three-dots code:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($dot-width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │ $dot-radius: $dot-width/2 !default;
  │              ^^^^^^^^^^^^
  ╵
    node_modules/three-dots/sass/_variables.scss 7:14                       @import
    node_modules/three-dots/sass/three-dots.scss 4:9                        @import
    stdin 2:9                                                               root stylesheet

我想将这个库加入我的vue 插件中，但是我遇到这么一个问题，颜色和大小等只能在编译时的Sass文件中定义好，如果我要在运行时修改样式（插件提供给用户配置），改变已经编译好的CSS就必须找到每种dots的样式依次覆盖它。

如果能加入原生的 CSS Variables ，那么我可以这样写

<div class="dot-elastic" style="--size:10px; --color: #FF0000; --spacing: 30px"></div>

当然，兼容性问题可以在 README 提示使用 css-vars-ponyfill

Any chance we can have a green circle and a blue border, or any custom color instead of just solid colors?

Leapfrog with three dots would be nice.

Hi,

Is rebuilding whole project the only way to change dot colors? It tried to overwrite keyframes (in my case, the dot-pulse one) but it seems to change only middle dot color - the one before and after looks to stay violet. I cant see any other property I could change

Best regards

Hi,

Would it be possible to introduce color and size system similar to bootstrap?
I mean the ...-color and ...-size classes for the three-dots component, just like at bootstrap colors page

I think it may be useful to use different colors/sizes of dots depending on the loader context.

I would see it as follow:

<div class="dot-flashing dot-primary dot-sm"></div>

Which would mean:

• use dot-flashing animation
• use primary color
• use sm size

For Sass/Less users (Sass here!) it would be helpful too to introduce variables for each color/size.