<div id="ccc"></div>
new mojs.Shape({
  parent:           '#ccc',
  shape:            'circle',
  stroke:           '#FC46AD',
  strokeDasharray:  '125, 125',
  strokeDashoffset: {'0': '-125'},
  strokeWidth:      4,
  fill:             'none',
  left:             '10%',
  top:              '50%',
  angle:            {'-90': '270'},
  radius:           20,
  isShowStart:      true,
  duration:         2000,
  easing:           'back.in',
})
.then({
  angle:            {'-90': '270'},
  strokeDashoffset: {'-125': '-250'},
  duration:         3000,
  easing:           'cubic.out',
  onComplete () {
    this.replay(0); // 无限循环
  }
}).play()
new mojs.Shape({
  shape:          'rect',
  fill:           'none',
  stroke:         '#FC46AD',
  radius:         10,
  strokeWidth:    20,
  angle:          { [-180] : 0 },//如果是负数可以像[-180]包起来

  duration:       2000
}).then({
  strokeWidth:    0,
  scale:          { to: 2, easing: 'sin.in' },
    onComplete () {
    this.replay(0); // 无限循环
  }
}).play();
new mojs.Shape({
  shape:          'rect',
  fill:           'none',
  stroke:         'cyan',
  radius:         10,
  strokeWidth:    20,
  angle:          { [-180] : 0 },
  top: '50%', 
  left:'75%',
  x:-200,//就是自身向左移动200px;
  duration:       2000,
  delay:          200
}).then({

  // duration here will be 600 too because inherited from the previous block
  // delay here will have default 0 value

  angle:          -360,
  scale:          2,
  strokeWidth:    0,
  stroke:         { 'magenta' : 'yellow'  },
      onComplete () {
    this.replay(0); // 无限循环
  }
}).play();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/mojs/0.265.6/mo.min.js